/* ============================================================
   KB DESIGNER — pacote de efeitos do design system, aplicado à home
   Origem: design system KB Designer (components/bundle.css).
   A primeira parte traduz os nomes de token do sistema para as
   variáveis que o style.css do site já tem; o resto é o pacote como
   está, seguido dos ajustes desta página. Carregar depois do style.css.
   ============================================================ */
:root{
  --font-display:var(--ff-display); --font-texto:var(--ff-body); --font-mono:var(--ff-mono);
  --largura-max:var(--maxw);
  --grad-ouro-1:#F2E3C6; --grad-ouro-2:#D4AF7C; --grad-ouro-3:#AD8148; --on-ouro:#0B0B0D;
  --tinta-painel:#0B0B0D; --fg-dim-painel:#5D6570;
  --elev-botao:0 14px 36px -20px rgba(212,175,124,.9);
  --elev-botao-hover:0 18px 44px -18px rgba(212,175,124,.95);
  --elev-palco:0 50px 110px -40px rgba(0,0,0,1);
  --esp-1:7px; --esp-2:12px; --esp-3:18px; --esp-4:26px;
  --raio-1:2px; --raio-2:3px; --raio-3:4px; --raio-4:6px; --raio-5:8px; --raio-pilula:999px;
  --secao-y:clamp(56px,7.4vw,100px); --painel-y:clamp(74px,10vw,136px);
  --dur-rapida:280ms; --dur-revelar:700ms; --dur-mascara:900ms; --dur-escalonar:70ms;
  --dur-giro:2600ms; --dur-aurora:32s; --dur-respiro:7s;
  --curva-saida:cubic-bezier(.2,.7,.3,1); --curva-mascara:cubic-bezier(.77,0,.18,1); --curva-retorno:cubic-bezier(.25,1.4,.5,1);
  --amp-discreta:0.5; --amp-plena:1; --tilt-max:9deg; --magnetico-forca:0.35; --magnetico-alcance:70px;
  --aurora-opacidade:0.55; --desfoque-aurora:80px;
}
[data-tema="claro"]{
  --grad-ouro-1:#9B713A; --grad-ouro-2:#76562C; --grad-ouro-3:#5C4322; --on-ouro:#FFF8EC;
  --tinta-painel:#14161A; --fg-dim-painel:#4C5462;
  --elev-botao:0 14px 36px -20px rgba(118,86,44,.9);
  --elev-botao-hover:0 18px 44px -18px rgba(118,86,44,.95);
  --elev-palco:0 50px 110px -40px rgba(20,22,26,.30);
}
/* o painel claro é claro nos dois temas: o degradê dourado de dentro dele é o do claro */
.panel--light{ --grad-ouro-1:#9B713A; --grad-ouro-2:#76562C; --grad-ouro-3:#5C4322 }

/* ============================================================
   KB DESIGNER — componentes e pacote de efeitos
   Carregado depois de tokens.css. Todo valor de cor, medida, tempo e curva
   vem de um token; aqui só ficam a forma e o comportamento.

   Regras do pacote
   1. Nada fica escondido sem JavaScript: os estados iniciais das animações
      só valem sob html.kb-anim, que o KB.iniciar() põe na página.
   2. prefers-reduced-motion: reduce desliga movimento e mostra tudo no
      estado final. O conteúdo nunca depende da animação.
   3. Magnético e inclinação só existem com ponteiro fino (mouse, caneta).
   4. Intensidade: data-intensidade="discreta" (padrão) ou "plena" em
      qualquer ancestral. Ela vira --kb-amp e multiplica os deslocamentos.
   ============================================================ */

:root{ --kb-amp:var(--amp-discreta) }
[data-intensidade="discreta"]{ --kb-amp:var(--amp-discreta) }
[data-intensidade="plena"]{ --kb-amp:var(--amp-plena) }

/* ---------- base ---------- */
.kb{
  font-family:var(--font-texto);font-size:16.5px;line-height:1.66;letter-spacing:.002em;
  color:var(--tinta);background:var(--sup);
  -webkit-font-smoothing:antialiased;
}
.kb *,.kb *::before,.kb *::after{ box-sizing:border-box }
.kb :focus-visible{ outline:2px solid var(--ouro);outline-offset:3px;border-radius:var(--raio-1) }
.kb ::selection{ background:var(--ouro);color:var(--on-ouro) }
.kb-oculto{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- tipografia ---------- */
.kb-h1,.kb-h2,.kb-h3{ font-family:var(--font-display);font-weight:700;text-wrap:balance;margin:0;color:var(--tinta) }
.kb-h1{ font-size:clamp(40px,6.6vw,78px);line-height:1.02;letter-spacing:-.028em }
.kb-h2{ font-size:clamp(29px,4.1vw,50px);line-height:1.08;letter-spacing:-.024em }
.kb-h3{ font-size:clamp(19px,2.1vw,24px);line-height:1.22;letter-spacing:-.016em }
.kb-lede{ font-size:clamp(16.5px,1.9vw,19px);line-height:1.68;color:var(--fg-dim);max-width:56ch;margin:0 }
.kb-rotulo{
  font-family:var(--font-mono);font-size:10px;line-height:1.4;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-mute);
}
/* texto em degradê dourado: a cor sólida fica de reserva */
.kb-ouro,
.kb-ouro .kb-palavra>span{
  color:var(--ouro);
  background:linear-gradient(135deg,var(--grad-ouro-1) 0%,var(--grad-ouro-2) 46%,var(--grad-ouro-3) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.kb-ouro:has(.kb-palavra){ background:none;-webkit-text-fill-color:currentColor }

/* ---------- Sobrelinha ---------- */
.kb-sobrelinha{
  font-family:var(--font-mono);font-size:10.5px;font-weight:400;line-height:1.4;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ouro);margin:0 0 20px;
}
.kb-sobrelinha::after{
  content:"";display:block;width:34px;height:1px;margin-top:14px;
  background:var(--ouro);opacity:.9;transform-origin:left center;
}
html.kb-anim .kb-sobrelinha[data-kb-revelar]::after{
  transition:transform var(--dur-revelar) var(--curva-saida) .25s;
}
html.kb-anim .kb-sobrelinha[data-kb-revelar]:not(.kb-visto)::after{ transform:scaleX(0) }

/* ---------- Botão ---------- */
.kb-btn{
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-texto);font-size:11.5px;font-weight:700;line-height:1;
  letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  padding:15px 24px;border:1px solid transparent;border-radius:var(--raio-2);cursor:pointer;
  transition:transform var(--dur-rapida) var(--curva-saida),background-color var(--dur-rapida),
             color var(--dur-rapida),border-color var(--dur-rapida),box-shadow var(--dur-rapida);
}
.kb-btn--ouro{
  --kb-luz:var(--on-ouro);
  background:linear-gradient(135deg,var(--grad-ouro-1) 0%,var(--grad-ouro-2) 46%,var(--grad-ouro-3) 100%);
  color:var(--on-ouro);box-shadow:var(--elev-botao);
}
.kb-btn--ouro:hover{ transform:translateY(-2px);box-shadow:var(--elev-botao-hover) }
.kb-btn--linha{ --kb-luz:var(--ouro);background:transparent;border-color:var(--linha-media);color:var(--tinta) }
.kb-btn--linha:hover{ border-color:var(--ouro);color:var(--ouro);transform:translateY(-2px) }
.kb-btn--sm{ padding:11px 18px;font-size:10.5px }
.kb-btn__rotulo{ display:inline-flex;align-items:center;gap:9px;transition:transform .5s var(--curva-retorno) }
.kb-btn svg{ width:14px;height:14px;flex:none }

/* ---------- Botão magnético + spotlight ----------
   O botão inteiro segue o ponteiro (no invólucro .kb-magnetico, para não
   brigar com o translateY do hover) e o rótulo vai um pouco além. O
   spotlight acende a BORDA no ponto do ponteiro e um halo fora dela: o
   fundo do botão não clareia, então o contraste do rótulo não muda. */
.kb-magnetico{
  display:inline-flex;
  transform:translate3d(var(--kb-mx,0px),var(--kb-my,0px),0);
  transition:transform .65s var(--curva-retorno);
}
.kb-magnetico.kb-atraido{ transition:transform .14s linear }
.kb-magnetico .kb-btn__rotulo{ transform:translate3d(var(--kb-lx,0px),var(--kb-ly,0px),0) }
.kb-magnetico.kb-atraido .kb-btn__rotulo{ transition:transform .14s linear }
.kb-magnetico .kb-btn::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(70px circle at var(--kb-px,50%) var(--kb-py,50%),var(--kb-luz),transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity var(--dur-rapida);
}
.kb-magnetico .kb-btn::before{
  content:"";position:absolute;inset:-14px;border-radius:12px;z-index:-1;pointer-events:none;
  background:radial-gradient(90px circle at calc(var(--kb-px,50%) + 14px) calc(var(--kb-py,50%) + 14px),
             color-mix(in srgb,var(--ouro) 26%,transparent),transparent 70%);
  filter:blur(6px);opacity:0;transition:opacity var(--dur-rapida);
}
.kb-magnetico.kb-atraido .kb-btn::after,
.kb-magnetico.kb-atraido .kb-btn::before{ opacity:1 }

/* ---------- Aurora (fundo) ---------- */
.kb-aurora{ position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0 }
.kb-aurora i{
  position:absolute;display:block;aspect-ratio:1;border-radius:50%;
  filter:blur(var(--desfoque-aurora));opacity:var(--aurora-opacidade);will-change:transform;
  animation:var(--dur-aurora) ease-in-out infinite alternate;
}
:root:not([data-tema="claro"]) .kb-aurora i{ opacity:.7 }
.kb-aurora i:nth-child(1){
  width:min(68%,820px);left:-14%;top:-38%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--grad-ouro-1) 42%,transparent),transparent);
  animation-name:kb-aurora-a;
}
.kb-aurora i:nth-child(2){
  width:min(58%,700px);right:-12%;top:-8%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--grad-ouro-3) 30%,transparent),transparent);
  animation-name:kb-aurora-b;animation-duration:calc(var(--dur-aurora) * .8);
}
.kb-aurora i:nth-child(3){
  width:min(52%,640px);left:24%;bottom:-46%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--chumbo-a) 90%,transparent),transparent);
  animation-name:kb-aurora-c;animation-duration:calc(var(--dur-aurora) * 1.2);
}
@keyframes kb-aurora-a{ to{ transform:translate3d(calc(var(--kb-amp) * 120px),calc(var(--kb-amp) * 70px),0) scale(1.12) } }
@keyframes kb-aurora-b{ to{ transform:translate3d(calc(var(--kb-amp) * -110px),calc(var(--kb-amp) * 60px),0) scale(.92) } }
@keyframes kb-aurora-c{ to{ transform:translate3d(calc(var(--kb-amp) * 80px),calc(var(--kb-amp) * -60px),0) scale(1.08) } }
.kb-pausa .kb-aurora i,.kb-aurora.kb-pausa i{ animation-play-state:paused }
.kb-sobre-aurora{ position:relative;z-index:1 }

/* ---------- Hero cinético + objeto 3D ---------- */
.kb-hero{
  position:relative;overflow:hidden;isolation:isolate;background:var(--sup);
  padding:clamp(64px,9vw,128px) var(--gutter);
}
.kb-hero__grade{
  position:relative;z-index:1;max-width:var(--largura-max);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,56px);align-items:center;
}
.kb-hero__titulo{
  font-family:var(--font-display);font-weight:700;margin:0;color:var(--tinta);text-wrap:balance;
  font-size:clamp(40px,6.6vw,78px);line-height:1.05;letter-spacing:-.004em;
}
.kb-hero__sub{
  margin:clamp(14px,1.6vw,20px) 0 0;max-width:30ch;text-wrap:balance;color:var(--ouro);
  font-size:clamp(19px,2.5vw,32px);line-height:1.22;letter-spacing:-.014em;
}
.kb-hero__acoes{ display:flex;flex-wrap:wrap;gap:12px;margin-top:30px }
@media (max-width:820px){
  .kb-hero__grade{ grid-template-columns:1fr }
  .kb-hero__palco{ order:-1;justify-self:center;width:min(220px,56vw) }
}

/* palavras com máscara: cada palavra sobe de dentro da própria linha.
   O respiro em cima e embaixo deixa acento e descendente fora do corte. */
.kb-palavra{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding:.14em .02em .1em;margin:-.14em -.02em -.1em;
}
.kb-palavra>span{ display:inline-block;will-change:transform }
html.kb-anim [data-kb-cinetico] .kb-palavra>span{
  transition:transform var(--dur-mascara) var(--curva-mascara),opacity var(--dur-mascara) var(--curva-saida);
  transition-delay:calc(var(--i,0) * var(--dur-escalonar));
}
html.kb-anim [data-kb-cinetico]:not(.kb-visto) .kb-palavra>span{ transform:translate3d(0,108%,0);opacity:0 }

/* palavra que gira no subtítulo */
.kb-giro{ display:inline-grid;vertical-align:bottom;overflow:hidden;padding:.12em 0 .1em;margin:-.12em 0 -.1em;transition:width .7s var(--curva-mascara) }
.kb-giro>span{
  grid-area:1/1;justify-self:start;white-space:nowrap;
  transition:transform .7s var(--curva-mascara),opacity .7s var(--curva-saida);
}
.kb-giro>span:not(.kb-ativo){ transform:translate3d(0,100%,0);opacity:0 }
.kb-giro>span.kb-saindo{ transform:translate3d(0,-100%,0);opacity:0 }

/* objeto 3D: sprite de 21 quadros (7 × 3) de um giro de ida e volta */
.kb-hero__palco{ position:relative;justify-self:end;width:min(360px,100%);perspective:900px }
.kb-objeto3d{
  position:relative;width:100%;aspect-ratio:1;
  background-repeat:no-repeat;background-size:700% 300%;background-position:50% 50%;
  transform:rotateX(var(--kb-rx,0deg)) rotateY(var(--kb-ry,0deg));
  transition:transform .6s var(--curva-saida);
  filter:drop-shadow(0 34px 34px var(--sombra-fraca));
}
.kb-objeto3d.kb-pose{ background-size:contain;background-position:center }
.kb-hero__palco::after{
  content:"";position:absolute;left:18%;right:18%;bottom:2%;height:14px;border-radius:50%;
  background:radial-gradient(closest-side,var(--sombra),transparent);opacity:.55;filter:blur(4px);
}
html.kb-anim .kb-objeto3d{ animation:kb-flutuar 6.5s ease-in-out infinite }
@keyframes kb-flutuar{ 50%{ translate:0 calc(var(--kb-amp) * -12px) } }
.kb-pausa .kb-objeto3d{ animation-play-state:paused }

/* emblema: o monograma original da marca girando em 3D. Gira devagar de um
   lado a outro, segue o mouse e um brilho atravessa o metal (a máscara do
   brilho é a própria logo, posta pelo JS em --kb-logo). */
.kb-emblema{ display:block;width:100%;perspective:700px }
.kb-emblema__marca{
  position:relative;display:block;transform-style:preserve-3d;
  transform:rotateX(var(--kb-rx,0deg)) rotateY(var(--kb-ry,0deg));transition:transform .6s var(--curva-saida);
}
.kb-emblema__marca img{ display:block;width:100%;height:auto;filter:drop-shadow(0 16px 16px var(--sombra-fraca)) }
.kb-emblema__marca::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--kb-logo) center/contain no-repeat;mask:var(--kb-logo) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%) no-repeat;
  background-size:250% 100%;background-position:120% 0;mix-blend-mode:soft-light;
}
html.kb-anim .kb-emblema__marca img{ animation:kb-oscilar 8s ease-in-out infinite }
html.kb-anim .kb-emblema__marca::after{ animation:kb-oscilar 8s ease-in-out infinite,kb-reflexo 8s ease-in-out infinite }
@keyframes kb-oscilar{
  0%,100%{ transform:rotateY(calc(var(--kb-amp) * -18deg)) translateY(0) }
  50%{ transform:rotateY(calc(var(--kb-amp) * 18deg)) translateY(calc(var(--kb-amp) * -6px)) }
}
@keyframes kb-reflexo{ 0%,30%{ background-position:120% 0 } 62%,100%{ background-position:-20% 0 } }
.kb-pausa .kb-emblema__marca img,.kb-pausa .kb-emblema__marca::after{ animation-play-state:paused }

/* ---------- Bento animado ---------- */
.kb-bento{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);
  gap:var(--esp-3);
}
.kb-bento__item{
  --kb-px:50%;--kb-py:50%;
  position:relative;isolation:isolate;overflow:hidden;grid-column:span 2;
  display:flex;flex-direction:column;gap:var(--esp-2);
  padding:var(--esp-4);border-radius:var(--raio-5);
  background:var(--sup-card);border:1px solid var(--linha-fraca);color:var(--tinta);
  transition:transform var(--dur-rapida) var(--curva-saida),border-color var(--dur-rapida),box-shadow var(--dur-rapida);
}
.kb-bento__item--larga{ grid-column:span 4 }
.kb-bento__item--cheia{ grid-column:1/-1 }
.kb-bento__item--alta{ grid-row:span 2 }
.kb-bento__item--alt{ background:linear-gradient(180deg,var(--chumbo-a) 0%,var(--chumbo-b) 100%) }
.kb-bento__item h3{ font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2.1vw,24px);line-height:1.22;letter-spacing:-.016em;margin:0 }
.kb-bento__item p{ margin:0;color:var(--fg-dim);font-size:15px;line-height:1.6;max-width:46ch }
.kb-bento__item .kb-rotulo{ color:var(--ouro) }
.kb-bento__arte{ margin-top:auto;padding-top:var(--esp-3) }
/* luz que segue o ponteiro dentro do card, e a borda que acende */
.kb-bento__item::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(360px circle at var(--kb-px) var(--kb-py),color-mix(in srgb,var(--ouro) 9%,transparent),transparent 65%);
  transition:opacity .4s;
}
.kb-bento__item::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--kb-px) var(--kb-py),var(--ouro),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .4s;
}
.kb-bento__item:hover{ transform:translateY(calc(var(--kb-amp) * -4px));box-shadow:0 30px 60px -40px var(--sombra) }
.kb-bento__item:hover::before,.kb-bento__item:hover::after{ opacity:1 }
/* entrada em cascata */
html.kb-anim .kb-bento .kb-bento__item{
  transition:opacity var(--dur-revelar) var(--curva-saida),transform var(--dur-revelar) var(--curva-saida),
             border-color var(--dur-rapida),box-shadow var(--dur-rapida);
  transition-delay:calc(var(--i,0) * var(--dur-escalonar));
}
html.kb-anim .kb-bento .kb-bento__item:not(.kb-visto){ opacity:0;transform:translate3d(0,calc(var(--kb-amp) * 48px),0) scale(.97) }
html.kb-anim .kb-bento .kb-bento__item.kb-visto:hover{ transition-delay:0s }
/* arte de linha: o traço se desenha na entrada e repassa no hover */
.kb-traco{ display:block;width:100%;height:auto;overflow:visible }
.kb-traco path,.kb-traco circle{ fill:none;stroke:var(--ouro);stroke-width:1.5;stroke-linecap:round }
.kb-traco .kb-traco__fraco{ stroke:var(--linha-media) }
/* animação, não transição: a transição de stroke-dashoffset trava no
   Chromium quando o card ainda está entrando em cascata */
.kb-traco__linha{ stroke-dasharray:100 }
html.kb-anim .kb-bento .kb-traco__linha{ stroke-dashoffset:100 }
html.kb-anim .kb-bento .kb-visto .kb-traco__linha{
  animation:kb-desenhar 1.4s var(--curva-mascara) calc(var(--i,0) * var(--dur-escalonar) + .3s) both;
}
@keyframes kb-desenhar{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }
/* sequência: pontos que acendem um a um (meses de um plano, sessões, etapas) */
.kb-pontos{ display:grid;grid-template-columns:repeat(var(--n,12),minmax(0,1fr));gap:6px;max-width:250px }
.kb-pontos i{ height:10px;border-radius:var(--raio-pilula);background:var(--ouro) }
/* grade: calendário de 7 colunas com os horários ocupados em ouro */
.kb-grade{ display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:200px }
.kb-grade i{ aspect-ratio:1;border-radius:2px;border:1px solid var(--linha-media) }
.kb-grade i.kb-on{ background:var(--ouro);border-color:var(--ouro) }
html.kb-anim .kb-pontos i,html.kb-anim .kb-grade i.kb-on{
  transition:background-color .45s var(--curva-saida),border-color .45s var(--curva-saida),transform .45s var(--curva-saida);
  transition-delay:calc(var(--j,0) * 70ms + .45s);
}
html.kb-anim .kb-bento .kb-bento__item:not(.kb-visto) .kb-pontos i{ background:var(--linha-fraca) }
html.kb-anim .kb-bento .kb-bento__item:not(.kb-visto) .kb-grade i.kb-on{ background:transparent;border-color:var(--linha-media);transform:scale(.6) }
.kb-bento__arte{ align-self:stretch }
.kb-barras{ display:flex;align-items:flex-end;gap:6px;height:64px }
.kb-barras span{
  flex:1;height:var(--h);border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--ouro),color-mix(in srgb,var(--ouro) 25%,transparent));
  transform-origin:bottom;
}
html.kb-anim .kb-barras span{ transition:transform .9s var(--curva-saida) calc(var(--j,0) * 60ms + .35s) }
html.kb-anim .kb-bento .kb-bento__item:not(.kb-visto) .kb-barras span{ transform:scaleY(.08) }
@media (max-width:900px){
  .kb-bento{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .kb-bento__item{ grid-column:span 1 }
  .kb-bento__item--larga,.kb-bento__item--cheia{ grid-column:1/-1 }
  .kb-bento__item--alta{ grid-row:span 1 }
}
@media (max-width:560px){
  .kb-bento{ grid-template-columns:1fr }
  .kb-bento__item,.kb-bento__item--larga{ grid-column:1/-1 }
}

/* ---------- Vitrine: rolagem horizontal + inclinação 3D ---------- */
.kb-vitrine{ position:relative }
.kb-vitrine__topo{ display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px }
.kb-vitrine__setas{ display:flex;gap:8px;flex:none }
.kb-vitrine__seta{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--raio-pilula);cursor:pointer;
  background:transparent;color:var(--tinta);border:1px solid var(--linha-media);
  transition:border-color var(--dur-rapida),color var(--dur-rapida),opacity var(--dur-rapida);
}
.kb-vitrine__seta:hover{ border-color:var(--ouro);color:var(--ouro) }
.kb-vitrine__seta:disabled{ opacity:.35;cursor:default;border-color:var(--linha-media);color:var(--tinta) }
.kb-vitrine__seta svg{ width:16px;height:16px }
.kb-vitrine__trilho{
  display:flex;gap:var(--esp-3);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  padding:28px var(--gutter) 46px;margin:-28px calc(var(--gutter) * -1) -46px;
  scrollbar-width:none;
}
.kb-vitrine__trilho::-webkit-scrollbar{ display:none }
.kb-vitrine__trilho:focus-visible{ outline:2px solid var(--ouro);outline-offset:-2px }
.kb-vitrine__trilho.kb-arrastando{ scroll-snap-type:none;cursor:grabbing;user-select:none }
.kb-vitrine__trilho.kb-arrastando .kb-peca{ pointer-events:none }
.kb-peca{
  --kb-rx:0deg;--kb-ry:0deg;--kb-px:50%;--kb-py:50%;
  flex:0 0 clamp(250px,30vw,340px);scroll-snap-align:start;perspective:1000px;
  text-decoration:none;color:inherit;
}
.kb-peca__corpo{
  position:relative;overflow:hidden;border-radius:var(--raio-4);background:var(--sup-card);
  border:1px solid var(--linha-fraca);
  transform:rotateX(var(--kb-rx)) rotateY(var(--kb-ry));transform-style:preserve-3d;
  transition:transform .7s var(--curva-saida),box-shadow .7s var(--curva-saida);
}
.kb-peca.kb-inclinando .kb-peca__corpo{ transition:transform .12s linear,box-shadow .4s;box-shadow:var(--elev-palco) }
.kb-peca__tela{ aspect-ratio:4/3;display:block;width:100%;object-fit:cover;background:var(--sup-card-alt) }
.kb-peca__brilho{
  position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:soft-light;
  background:radial-gradient(420px circle at var(--kb-px) var(--kb-py),rgba(255,255,255,.55),transparent 60%);
  transition:opacity .4s;
}
.kb-peca.kb-inclinando .kb-peca__brilho{ opacity:1 }
.kb-peca__legenda{ padding:16px 18px 18px;display:grid;gap:4px }
.kb-peca__legenda b{ font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.006em;line-height:1.25 }
.kb-peca__legenda .kb-rotulo{ color:var(--fg-mute) }
/* modo fixo: a seção prende na tela e a rolagem vertical anda o trilho */
.kb-vitrine--fixa.kb-fixando{ height:var(--kb-altura,auto) }
.kb-vitrine--fixa.kb-fixando .kb-vitrine__palco{ position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden }
.kb-vitrine--fixa.kb-fixando .kb-vitrine__trilho{ overflow:visible;scroll-snap-type:none;transform:translate3d(var(--kb-tx,0px),0,0);will-change:transform }

/* ---------- Roteiro: scrollytelling ---------- */
.kb-roteiro{
  --kb-prog:0;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);
  position:relative;
}
.kb-roteiro__visual{
  position:sticky;top:clamp(80px,14vh,140px);align-self:start;
  aspect-ratio:1;max-width:420px;width:100%;display:grid;place-items:center;
}
.kb-roteiro__arco{ position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg) }
.kb-roteiro__arco circle{ fill:none;stroke-width:1 }
.kb-roteiro__arco .kb-arco-fundo{ stroke:var(--linha-fraca) }
.kb-roteiro__arco .kb-arco-prog{
  stroke:var(--ouro);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:100;
  stroke-dashoffset:calc(100 - var(--kb-prog) * 100);transition:stroke-dashoffset .9s var(--curva-mascara);
}
.kb-roteiro__letras{ display:grid;place-items:center }
.kb-roteiro__letra{
  grid-area:1/1;font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(120px,17vw,220px);letter-spacing:-.04em;
  clip-path:inset(0 0 0 0);
  transition:clip-path .8s var(--curva-mascara),opacity .5s var(--curva-saida),transform .8s var(--curva-mascara);
}
.kb-roteiro__letra:not(.kb-ativo){ clip-path:inset(100% 0 0 0);opacity:0;transform:translateY(calc(var(--kb-amp) * 16px)) }
.kb-roteiro__dia{
  position:absolute;bottom:16%;left:0;right:0;text-align:center;color:var(--fg-mute);
}
.kb-roteiro__compasso{ position:absolute;top:9%;left:50%;width:9%;translate:-50% 0;opacity:.9;
  transform:rotate(calc(var(--kb-prog) * 40deg - 20deg));transform-origin:50% 8%;transition:transform 1s var(--curva-mascara) }
.kb-roteiro__etapas{ list-style:none;margin:0;padding:0 }
.kb-etapa{
  min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:24px 0;border-top:1px solid var(--rule);
  transition:opacity .6s var(--curva-saida);
}
.kb-etapa:first-child{ border-top:0 }
.kb-etapa h3{ font-family:var(--font-display);font-weight:700;margin:0;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.02em }
.kb-etapa p{ margin:0;color:var(--fg-dim);max-width:52ch }
.kb-etapa .kb-entregavel{ font-size:15px;color:var(--tinta) }
.kb-etapa .kb-rotulo{ color:var(--ouro) }
html.kb-anim .kb-roteiro .kb-etapa:not(.kb-ativo){ opacity:.32 }
@media (max-width:820px){
  .kb-roteiro{ grid-template-columns:1fr }
  .kb-roteiro__visual{
    top:0;z-index:2;max-width:none;aspect-ratio:auto;height:132px;
    background:var(--sup);border-bottom:1px solid var(--rule);
  }
  .kb-roteiro__arco{ inset:auto;width:112px;height:112px;left:calc(50% - 56px);top:10px }
  .kb-roteiro__letra{ font-size:64px }
  .kb-roteiro__dia,.kb-roteiro__compasso{ display:none }
  .kb-etapa{ min-height:52vh }
}

/* ---------- Revelar: máscara + fade ---------- */
html.kb-anim [data-kb-revelar]{
  transition:opacity var(--dur-revelar) var(--curva-saida),transform var(--dur-revelar) var(--curva-saida),
             -webkit-mask-size var(--dur-mascara) var(--curva-mascara),mask-size var(--dur-mascara) var(--curva-mascara);
  transition-delay:calc(var(--i,0) * var(--dur-escalonar));
}
html.kb-anim [data-kb-revelar="subir"]:not(.kb-visto){ opacity:0;transform:translate3d(0,calc(var(--kb-amp) * 36px),0) }
html.kb-anim [data-kb-revelar="fade"]:not(.kb-visto){ opacity:0 }
/* máscara com mask-image, não clip-path: um elemento todo recortado por
   clip-path some para o IntersectionObserver e nunca seria revelado */
html.kb-anim [data-kb-revelar="mascara"],html.kb-anim [data-kb-revelar="cortina"]{
  -webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:0 100%;mask-position:0 100%;
}
html.kb-anim [data-kb-revelar="cortina"]{ -webkit-mask-position:0 0;mask-position:0 0 }
html.kb-anim [data-kb-revelar="mascara"]:not(.kb-visto){ -webkit-mask-size:100% 0%;mask-size:100% 0%;opacity:0;transform:translate3d(0,calc(var(--kb-amp) * 24px),0) }
html.kb-anim [data-kb-revelar="cortina"]:not(.kb-visto){ -webkit-mask-size:0% 100%;mask-size:0% 100% }
html.kb-anim [data-kb-revelar="palavras"] .kb-palavra>span{
  transition:transform var(--dur-mascara) var(--curva-mascara),opacity var(--dur-mascara) var(--curva-saida);
  transition-delay:calc(var(--i,0) * var(--dur-escalonar));
}
html.kb-anim [data-kb-revelar="palavras"]:not(.kb-visto) .kb-palavra>span{ transform:translate3d(0,108%,0);opacity:0 }
/* ---------- Rodapé: luz suave + logo animada ---------- */
.kb-rodape{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--chumbo-a) 0%,var(--chumbo-b) 46%,var(--sup) 100%);
  padding:clamp(56px,7.4vw,100px) var(--gutter) 28px;color:var(--tinta);
}
.kb-rodape::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ouro),transparent);opacity:.9;
}
.kb-rodape__luz{
  position:absolute;z-index:-1;left:50%;top:-55%;width:min(1100px,140%);aspect-ratio:2/1;translate:-50% 0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ouro) 16%,transparent),transparent);
  pointer-events:none;
}
html.kb-anim .kb-rodape__luz{ animation:kb-respiro var(--dur-respiro) ease-in-out infinite }
@keyframes kb-respiro{ 0%,100%{ opacity:.65;scale:1 } 50%{ opacity:1;scale:1.06 } }
.kb-pausa .kb-rodape__luz{ animation-play-state:paused }
.kb-rodape__grade{
  max-width:var(--largura-max);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,.8fr));gap:clamp(24px,4vw,56px);
}
.kb-rodape__marca{ display:flex;align-items:center;gap:14px }
.kb-rodape__mark{ position:relative;height:64px;aspect-ratio:780/611;flex:none }
.kb-rodape__mark img{ display:block;height:100%;width:auto }
.kb-rodape__word{ display:block;height:20px;width:auto }
.kb-rodape__lema{ margin:18px 0 0;max-width:30ch;font-size:clamp(19px,2.1vw,24px);line-height:1.22;letter-spacing:-.016em;font-weight:700;font-family:var(--font-display) }
.kb-rodape h4{ margin:0 0 14px }
.kb-rodape ul{ list-style:none;margin:0;padding:0;display:grid;gap:8px }
.kb-rodape a{ color:var(--fg-dim);text-decoration:none;transition:color var(--dur-rapida) }
.kb-rodape a:hover{ color:var(--ouro) }
.kb-rodape__base{
  max-width:var(--largura-max);margin:clamp(40px,6vw,72px) auto 0;padding-top:18px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
}
/* brilho que atravessa o monograma: uma faixa clara recortada pela
   própria logo (a máscara é a imagem, posta pelo JS em --kb-logo) */
.kb-rodape__mark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--kb-logo) center/contain no-repeat;mask:var(--kb-logo) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;
  background-size:250% 100%;background-position:120% 0;
  mix-blend-mode:soft-light;
}
html.kb-anim .kb-rodape.kb-visto .kb-rodape__mark::after{ animation:kb-brilho 1.8s var(--curva-saida) 1s both }
@keyframes kb-brilho{ from{ background-position:120% 0 } to{ background-position:-20% 0 } }
html.kb-anim .kb-rodape__mark img{ transition:transform 1.1s var(--curva-mascara),opacity .8s var(--curva-saida) }
html.kb-anim .kb-rodape:not(.kb-visto) .kb-rodape__mark img{ transform:translate3d(0,calc(var(--kb-amp) * 30px),0) rotate(-8deg);opacity:0 }
html.kb-anim .kb-rodape__word{ transition:clip-path 1s var(--curva-mascara) .35s }
html.kb-anim .kb-rodape:not(.kb-visto) .kb-rodape__word{ clip-path:inset(0 100% 0 0) }
html.kb-anim .kb-rodape .kb-rodape__mark:hover img{ transform:rotate(-4deg) scale(1.04);transition-duration:.5s }
@media (max-width:820px){ .kb-rodape__grade{ grid-template-columns:1fr 1fr } .kb-rodape__grade>:first-child{ grid-column:1/-1 } }

/* ---------- painel creme (destaque) ---------- */
.kb-painel-creme{
  --tinta:var(--tinta-painel);--fg-dim:var(--fg-dim-painel);--ouro:var(--ouro-escuro);
  position:relative;background:var(--sup-creme);color:var(--tinta);
}

/* ---------- movimento reduzido: tudo no estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .kb-pontos i,.kb-grade i,.kb-aurora i,.kb-objeto3d,.kb-emblema__marca img,.kb-emblema__marca::after,.kb-rodape__luz,.kb-rodape__mark::after,.kb-traco__linha{ animation:none!important }
  .kb-magnetico,.kb-peca__corpo{ transform:none!important }
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
  .kb-roteiro__letra,.kb-giro>span{ transition:none }
}
/* ============================================================
   AJUSTES DA HOME
   ============================================================ */

/* ---------- hero ---------- */
.hero > .kb-aurora{ z-index:0 }
/* o monograma original como emblema acima da sobrelinha (.kb-emblema do design system) */
.hero-emblema{ width:clamp(112px,12vw,156px);margin:0 auto clamp(12px,1.6vw,20px) }
/* o título só some enquanto espera o JS quebrar as palavras; se o JS não vier,
   ele aparece sozinho em 2,5s */
html.kb-anim [data-kb-cinetico]:not([data-kb-quebrado]){ opacity:0;animation:kb-mostrar 0s 2.5s forwards }
@keyframes kb-mostrar{ to{ opacity:1 } }
.hero-topo h1 .kb-palavra{ padding-inline:.04em;margin-inline:-.04em }

/* ---------- botões de contato: magnético + spotlight no .btn do site ---------- */
.kb-magnetico .btn{ position:relative;isolation:isolate }
.kb-magnetico .btn--gold{ --kb-luz:var(--on-ouro) }
.kb-magnetico .btn--line{ --kb-luz:var(--ouro) }
.kb-magnetico .btn::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(70px circle at var(--kb-px,50%) var(--kb-py,50%),var(--kb-luz),transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--dur-rapida);
}
.kb-magnetico .btn::before{
  content:"";position:absolute;inset:-14px;border-radius:12px;z-index:-1;pointer-events:none;
  background:radial-gradient(90px circle at calc(var(--kb-px,50%) + 14px) calc(var(--kb-py,50%) + 14px),
             color-mix(in srgb,var(--ouro) 26%,transparent),transparent 70%);
  filter:blur(6px);opacity:0;transition:opacity var(--dur-rapida);
}
.kb-magnetico.kb-atraido .btn::after,.kb-magnetico.kb-atraido .btn::before{ opacity:1 }
/* botões lado a lado: espaço para o deslocamento não encostar um no outro */
.hero-actions:has(.kb-magnetico),.cta .hero-actions:has(.kb-magnetico),#orcamento :has(> .kb-magnetico){ gap:20px 32px }

/* ---------- carrossel do hero: o notebook em destaque inclina sob o mouse ---------- */
.palco .laptop{
  transform:rotateX(var(--kb-rx,0deg)) rotateY(var(--kb-ry,0deg));
  transition:transform .7s var(--curva-saida);transform-style:preserve-3d;
}
.palco .slide{ perspective:1400px }
.palco .laptop.kb-inclinando{ transition:transform .12s linear }

/* ---------- Profissões: vitrine horizontal ----------
   Cada peça é um esboço do site daquela área, com a cor e a fonte de títulos
   dela. As cores vêm das páginas de profissão; no tema escuro, a versão escura. */
#profissoes .kb-vitrine__topo{ margin-bottom:clamp(26px,3.4vw,40px) }
#profissoes .kb-vitrine__topo h2{ margin:0 }
#profissoes .kb-vitrine__trilho{ padding-top:24px }
#profissoes .kb-peca{ flex-basis:clamp(270px,31vw,360px);cursor:grab }
#profissoes .kb-vitrine__trilho.kb-arrastando,#profissoes .kb-vitrine__trilho.kb-arrastando .kb-peca{ cursor:grabbing }
.prof-tela{
  aspect-ratio:auto;min-height:300px;display:flex;flex-direction:column;gap:10px;
  padding:20px 20px 18px;background:var(--a-sup);color:var(--a-tinta);border-bottom:1px solid var(--linha-fraca);
}
.prof-tela .prof-chip{
  align-self:flex-start;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--a-ouro);border:1px solid color-mix(in srgb,var(--a-ouro) 45%,transparent);border-radius:999px;padding:4px 9px;
}
.prof-tela .prof-h{
  margin:6px 0 0;font-family:var(--a-fonte);font-weight:700;font-size:22px;line-height:1.14;letter-spacing:-.01em;color:var(--a-tinta);
  text-wrap:balance;
}
.prof-tela .prof-sub{
  margin:0;font-size:13px;line-height:1.5;color:var(--a-dim);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.prof-tela .prof-pe{ margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding-top:6px }
.prof-tela .prof-cta{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a-on);
  padding:9px 13px;border-radius:3px;background:linear-gradient(135deg,var(--a-g1),var(--a-g2) 46%,var(--a-g3));
}
.prof-tela .prof-nota{ font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.06em;color:var(--a-dim);line-height:1.5 }
#profissoes .kb-peca__legenda{ background:var(--sup-card) }
#profissoes .kb-peca__legenda b{ color:var(--fg) }
#profissoes .kb-peca__legenda .prof-ver{
  margin-top:8px;justify-self:start;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-bottom:2px;
}
#profissoes .kb-peca:hover .prof-ver{ border-color:var(--accent) }
#profissoes .kb-vitrine__seta{ color:var(--fg);border-color:var(--linha-media) }
#profissoes .kb-vitrine__seta:hover{ color:var(--ouro);border-color:var(--ouro) }
#profissoes .kb-vitrine__seta:disabled{ color:var(--fg);border-color:var(--linha-media) }
@media (max-width:620px){ #profissoes .kb-vitrine__topo{ flex-direction:column;align-items:flex-start } }

/* ---------- Bento: os serviços e os sistemas em grade animada ---------- */
.servicos--bento{ border-top:0;margin-top:clamp(30px,4vw,44px) }
.servicos--bento .servico,
.servicos--bento .servico:last-child{
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  padding:clamp(22px,2.6vw,30px);border:1px solid var(--linha-fraca);border-radius:var(--raio-5);
  background:var(--sup-card);color:var(--fg);
}
.servicos--bento .servico p{ max-width:56ch }
.servicos--bento .servico-valor{ position:relative;text-align:left;padding-top:18px;border-top:1px solid var(--rule) }
/* o primeiro card ocupa a linha inteira: texto à esquerda, preço à direita */
.servicos--bento .kb-bento__item--cheia{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px 48px }
.servicos--bento .kb-bento__item--cheia .servico-valor{ text-align:right;border-top:0;padding-top:0 }
.servicos--bento .kb-bento__item--cheia .servico-valor::before{ left:auto;right:0;top:auto;bottom:-10px;transform-origin:right center }
.servicos--bento .kb-bento__item--cheia .servico-valor b{ font-size:clamp(40px,4.8vw,58px) }
.servicos--bento .kb-bento__item:not(.kb-bento__item--cheia){ grid-column:span 3 }
@media (max-width:900px){ .servicos--bento .kb-bento__item:not(.kb-bento__item--cheia){ grid-column:span 1 } }
@media (max-width:640px){
  .servicos--bento .kb-bento__item--cheia{ grid-template-columns:1fr }
  .servicos--bento .kb-bento__item--cheia .servico-valor{ text-align:left;border-top:1px solid var(--rule);padding-top:18px }
  .servicos--bento .kb-bento__item--cheia .servico-valor::before{ left:0;right:auto;top:-1px;bottom:auto;transform-origin:left center }
}
@media (max-width:560px){ .servicos--bento .kb-bento__item:not(.kb-bento__item--cheia){ grid-column:1/-1 } }
/* o fio dourado sobre o preço corre quando a grade entra */
.servicos--bento .servico-valor::before{
  content:"";position:absolute;left:0;top:-1px;width:34px;height:1px;background:var(--accent);transform-origin:left center;
}
html.kb-anim .servicos--bento .servico-valor::before{ transition:transform .9s var(--curva-saida) calc(var(--i,0) * var(--dur-escalonar) + .45s) }
/* o preço conta até o valor quando o card entra (o número certo já está no HTML) */
.servico-valor b{ font-variant-numeric:tabular-nums }
html.kb-anim .servicos--bento .servico:not(.kb-visto) .servico-valor::before{ transform:scaleX(0) }

/* ---------- sobrelinha: o fio cresce quando a seção chega ---------- */
html.kb-anim .eyebrow[data-kb-revelar]::after{ transform-origin:left center;transition:transform var(--dur-revelar) var(--curva-saida) .25s }
html.kb-anim .hero-topo .eyebrow[data-kb-revelar]::after,
html.kb-anim .cta .eyebrow[data-kb-revelar]::after{ transform-origin:center }
html.kb-anim .eyebrow[data-kb-revelar]:not(.kb-visto)::after{ transform:scaleX(0) }


/* ---------- Método Áureo™: scrollytelling ---------- */
.metodo-grid--roteiro{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) }
/* a coluna estica até o fim das etapas: é o trilho por onde o visual desliza preso */
.metodo-lado{ align-self:stretch }
.metodo-visual{
  position:sticky;top:clamp(90px,16vh,150px);
  width:min(100%,380px);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;
  --ouro:var(--accent);
}
.metodo-visual .kb-roteiro__arco .kb-arco-fundo{ stroke:var(--rule) }
.metodo-visual .kb-roteiro__letra{ color:var(--accent);font-size:clamp(130px,15vw,200px) }
.metodo-visual .kb-roteiro__dia{ color:var(--fg-dim);bottom:15% }
.steps li.kb-etapa{
  min-height:0;display:grid;flex-direction:initial;justify-content:initial;
  gap:clamp(16px,2.4vw,30px);padding:clamp(30px,4vw,44px) 0;
}
html.kb-anim .steps li.kb-etapa{ transition:opacity .6s var(--curva-saida) }
html.kb-anim .steps li.kb-etapa:not(.kb-ativo){ opacity:.38 }
.entregaveis--faixa{ margin-top:clamp(40px,5vw,64px) }
.entregaveis--faixa ul{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px }
/* celular: o círculo com a letra vira uma faixa presa logo abaixo do
   cabeçalho, entre o título e as etapas, como no design system */
@media (max-width:920px){
  .metodo-grid--roteiro{ grid-template-columns:1fr;row-gap:0 }
  .metodo-texto{ display:contents }
  .metodo-texto > .steps{ order:2 }
  .metodo-lado{
    order:1;position:sticky;top:calc(var(--topo-h,68px) - 1px);z-index:3;align-self:start;
    margin:22px calc(var(--gutter) * -1) 0;padding:10px var(--gutter) 16px;
    background:var(--sup-creme);border-bottom:1px solid var(--rule);
    box-shadow:0 18px 22px -18px color-mix(in srgb,var(--sup-creme) 100%,transparent);
  }
  .metodo-visual{ position:relative;top:auto;width:96px }
  .metodo-visual .kb-roteiro__letra{ font-size:48px }
  /* o pacote encolhe o arco do Roteiro no celular; aqui o círculo já é pequeno */
  .metodo-visual .kb-roteiro__arco{ inset:0;left:0;top:0;width:100%;height:100% }
  .metodo-visual .kb-roteiro__dia{ display:none }
  .steps{ margin-top:0 }
  .steps li.kb-etapa{ padding:26px 0 }
}
@media (max-width:640px){ .entregaveis--faixa ul{ grid-template-columns:1fr } }

/* ---------- rodapé: luz suave + logo animada ---------- */
.site-foot{ position:relative;overflow:hidden;isolation:isolate;padding-block:44px 30px }
[data-tema="claro"] .site-foot{ background:linear-gradient(180deg,var(--chumbo-a) 0%,var(--chumbo-b) 46%,var(--sup) 100%) }
.site-foot .kb-rodape__luz{ top:-160%;width:min(900px,120%);aspect-ratio:3/1 }
.foot-brand .kb-rodape__mark{ height:38px;margin:-8px 0;position:relative;display:block;flex:none }
.foot-brand .kb-rodape__mark img{ height:100%;width:auto;margin:0 }
html.kb-anim .site-foot .kb-rodape__mark img{ transition:transform 1.1s var(--curva-mascara),opacity .8s var(--curva-saida) }
html.kb-anim .site-foot:not(.kb-visto) .kb-rodape__mark img{ transform:translate3d(0,calc(var(--kb-amp) * 18px),0) rotate(-8deg);opacity:0 }
html.kb-anim .site-foot.kb-visto .kb-rodape__mark::after{ animation:kb-brilho 1.8s var(--curva-saida) .9s both }

@media (prefers-reduced-motion:reduce){
  .palco .laptop{ transform:none!important }
  .steps li.kb-etapa{ opacity:1!important }
}

/* cabeçalho da vitrine de profissões: título e texto empilhados, setas à direita */
.prof-head--vitrine{ display:block;margin-bottom:0 }
.prof-head--vitrine .lede{ margin-top:18px }

/* ---------- artes dos cards de serviços e sistemas ----------
   Cada card tem um desenho que se monta quando ele entra na tela. Sem JS ou
   com movimento reduzido, o desenho aparece pronto. */
/* o card herda align-items:start da lista antiga: sem o stretch, as grades
   de pontos e da agenda não têm largura e somem */
.servico-arte{ margin:2px 0 0;align-self:stretch }
.servico-arte svg{ display:block;width:100%;max-width:240px;height:auto;overflow:visible }
.servico-arte .kb-traco path,.servico-arte .kb-traco circle{ stroke:var(--accent);stroke-width:1.6 }
.servico-arte .kb-traco .kb-traco__fraco{ stroke:var(--linha-media);stroke-width:1 }
.servico-arte .kb-traco rect{ fill:none;stroke:var(--linha-media);stroke-width:1.2 }
.servico-arte .kb-barras{ max-width:260px;height:70px }
.servico-arte .kb-barras span{ background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 22%,transparent)) }
.arte-meses{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;max-width:250px }
.arte-meses i{ height:10px;border-radius:999px;background:var(--accent) }
.arte-agenda{ display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:200px }
.arte-agenda i{ aspect-ratio:1;border-radius:2px;border:1px solid var(--linha-media) }
.arte-agenda i.on{ background:var(--accent);border-color:var(--accent) }
html.kb-anim .arte-meses i,html.kb-anim .arte-agenda i.on{
  transition:background-color .45s var(--curva-saida),border-color .45s var(--curva-saida),transform .45s var(--curva-saida);
  transition-delay:calc(var(--j,0) * 70ms + .45s);
}
html.kb-anim .servico:not(.kb-visto) .arte-meses i{ background:var(--linha-fraca) }
html.kb-anim .servico:not(.kb-visto) .arte-agenda i.on{ background:transparent;border-color:var(--linha-media);transform:scale(.6) }
/* card de linha inteira: texto, desenho no meio e preço */
.servicos--bento .kb-bento__item--cheia{ grid-template-columns:minmax(0,1fr) minmax(150px,.5fr) auto }
.servicos--bento .kb-bento__item--cheia .servico-arte{ align-self:center }
@media (max-width:900px){
  .servicos--bento .kb-bento__item--cheia{ grid-template-columns:minmax(0,1fr) auto }
  .servicos--bento .kb-bento__item--cheia .servico-arte{ grid-column:1/-1;grid-row:2 }
}
@media (max-width:640px){
  .servicos--bento .kb-bento__item--cheia{ grid-template-columns:1fr }
  .servicos--bento .kb-bento__item--cheia .servico-arte{ grid-row:auto }
}
@media (prefers-reduced-motion:reduce){ .arte-meses i,.arte-agenda i{ transition:none!important } }

/* ---------- planos: entrada em cascata, luz que segue o mouse e preço contando ---------- */
.plano{ position:relative;isolation:isolate }
.plano::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--kb-px,50%) var(--kb-py,50%),color-mix(in srgb,var(--ouro) 10%,transparent),transparent 65%);
  transition:opacity .4s;
}
.plano::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;padding:1px;
  background:radial-gradient(260px circle at var(--kb-px,50%) var(--kb-py,50%),var(--ouro),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .4s;
}
@media (hover:hover) and (pointer:fine){ .plano:hover::before,.plano:hover::after{ opacity:1 } }
.plano .preco{ font-variant-numeric:tabular-nums }
html.kb-anim .plano{
  transition:opacity var(--dur-revelar) var(--curva-saida),transform var(--dur-revelar) var(--curva-saida),background-color .32s;
  transition-delay:calc(var(--i,0) * 90ms);
}
html.kb-anim .plano:not(.kb-visto){ opacity:0;transform:translate3d(0,calc(var(--kb-amp) * 40px),0) }
/* os itens de cada plano entram um a um, depois do card */
html.kb-anim .plano li{
  transition:opacity .5s var(--curva-saida),transform .5s var(--curva-saida);
  transition-delay:calc(var(--i,0) * 90ms + var(--k,0) * 60ms + .35s);
}
html.kb-anim .plano:not(.kb-visto) li{ opacity:0;transform:translate3d(-12px,0,0) }
/* a nota do plano completo: o fio dourado desce depois dos itens */
html.kb-anim .plano-nota{ transition:border-color .6s var(--curva-saida) calc(var(--i,0) * 90ms + .9s) }
html.kb-anim .plano:not(.kb-visto) .plano-nota{ border-left-color:transparent }

/* ---------- selo de compra garantida: o mesmo metal girando do monograma do topo ---------- */
.garantia-emblema{ width:clamp(160px,15vw,196px) }
.garantia-emblema .garantia-selo{ width:100% }

/* paleta de cada área na vitrine das profissões (claro; o escuro logo abaixo) */
[data-prof="advocacia"]{ --a-fonte:"Spectral",Georgia,serif;--a-sup:#F4F6FA;--a-tinta:#0D1626;--a-dim:#4C5462;--a-ouro:#6C5429;--a-g1:#917137;--a-g2:#6C5429;--a-g3:#52401F;--a-on:#FFF8EC }
[data-prof="psicologia"]{ --a-fonte:"Fraunces",Georgia,serif;--a-sup:#F5F8F6;--a-tinta:#171D1A;--a-dim:#4C5462;--a-ouro:#45603F;--a-g1:#5B7F53;--a-g2:#45603F;--a-g3:#364A31;--a-on:#FFF8EC }
[data-prof="fisioterapia"]{ --a-fonte:"Outfit","Helvetica Neue",Arial,sans-serif;--a-sup:#F4FAF9;--a-tinta:#08201F;--a-dim:#4C5462;--a-ouro:#1F6358;--a-g1:#2B8A7B;--a-g2:#1F6358;--a-g3:#164840;--a-on:#FFF8EC }
[data-prof="personal"]{ --a-fonte:"Archivo","Helvetica Neue",Arial,sans-serif;--a-sup:#FAF6F4;--a-tinta:#121316;--a-dim:#4C5462;--a-ouro:#963F18;--a-g1:#C2511F;--a-g2:#963F18;--a-g3:#773213;--a-on:#FFF8EC }
[data-prof="enfermagem"]{ --a-fonte:"Lora",Georgia,serif;--a-sup:#F4F8FA;--a-tinta:#0B1C24;--a-dim:#4C5462;--a-ouro:#2F5F73;--a-g1:#3E7D97;--a-g2:#2F5F73;--a-g3:#254A5A;--a-on:#FFF8EC }
[data-prof="nutricao"]{ --a-fonte:"Literata",Georgia,serif;--a-sup:#F6F8F5;--a-tinta:#141A12;--a-dim:#4C5462;--a-ouro:#466330;--a-g1:#5E8541;--a-g2:#466330;--a-g3:#354B24;--a-on:#FFF8EC }
[data-prof="odontologia"]{ --a-fonte:"Manrope","Helvetica Neue",Arial,sans-serif;--a-sup:#F4F8FA;--a-tinta:#091C23;--a-dim:#4C5462;--a-ouro:#246170;--a-g1:#308297;--a-g2:#246170;--a-g3:#1B4A55;--a-on:#FFF8EC }
[data-prof="terapias"]{ --a-fonte:"Cormorant Garamond",Georgia,serif;--a-sup:#F7F5F8;--a-tinta:#1B1620;--a-dim:#4C5462;--a-ouro:#6C5234;--a-g1:#8E6C45;--a-g2:#6C5234;--a-g3:#544028;--a-on:#FFF8EC }
:root:not([data-tema="claro"]) [data-prof="advocacia"]{ --a-sup:#0D1626;--a-tinta:#F3F1EA;--a-dim:#9BA3AE;--a-ouro:#C2A06A;--a-g1:#E6D3AC;--a-g2:#C2A06A;--a-g3:#8E6E3C;--a-on:#0D1626 }
:root:not([data-tema="claro"]) [data-prof="psicologia"]{ --a-sup:#171D1A;--a-tinta:#F2EFE8;--a-dim:#9BA3AE;--a-ouro:#A9C3AC;--a-g1:#D3E2D4;--a-g2:#A9C3AC;--a-g3:#6E8A72;--a-on:#171D1A }
:root:not([data-tema="claro"]) [data-prof="fisioterapia"]{ --a-sup:#08201F;--a-tinta:#EDF4F2;--a-dim:#9BA3AE;--a-ouro:#5FC2B0;--a-g1:#A8E3D7;--a-g2:#5FC2B0;--a-g3:#2F8275;--a-on:#08201F }
:root:not([data-tema="claro"]) [data-prof="personal"]{ --a-sup:#121316;--a-tinta:#F4F2EF;--a-dim:#9BA3AE;--a-ouro:#E8763F;--a-g1:#F6B28B;--a-g2:#E8763F;--a-g3:#B4531F;--a-on:#121316 }
:root:not([data-tema="claro"]) [data-prof="enfermagem"]{ --a-sup:#0B1C24;--a-tinta:#EFF3F5;--a-dim:#9BA3AE;--a-ouro:#7FB8CE;--a-g1:#BBDCE9;--a-g2:#7FB8CE;--a-g3:#48798C;--a-on:#0B1C24 }
:root:not([data-tema="claro"]) [data-prof="nutricao"]{ --a-sup:#141A12;--a-tinta:#F2F2E9;--a-dim:#9BA3AE;--a-ouro:#9FC47C;--a-g1:#CDE3B6;--a-g2:#9FC47C;--a-g3:#67884A;--a-on:#141A12 }
:root:not([data-tema="claro"]) [data-prof="odontologia"]{ --a-sup:#091C23;--a-tinta:#EEF4F5;--a-dim:#9BA3AE;--a-ouro:#64B4C6;--a-g1:#AEDCE6;--a-g2:#64B4C6;--a-g3:#357D8C;--a-on:#091C23 }
:root:not([data-tema="claro"]) [data-prof="terapias"]{ --a-sup:#1B1620;--a-tinta:#F2EEE9;--a-dim:#9BA3AE;--a-ouro:#C6A678;--a-g1:#E6D3B4;--a-g2:#C6A678;--a-g3:#8A6B47;--a-on:#1B1620 }