/* Kuco espiando por cima da borda de cima de um card (mesmas artes e mesmo recorte do login do app).
   O corte reto da arte encosta na borda: o translate desce a arte pela fração que fica abaixo do corte
   (os dedos que agarram a borda), medida em cada arte e guardada em --kuco-sobra. Ele fica por cima do
   card só pra os dedos aparecerem na frente dele. A entrada (pulinho) é do kuco.js. */
.kuco-palco {
  position: relative;
}

.kuco {
  position: absolute;
  bottom: 100%;
  z-index: 2;
  display: block;
  width: var(--kuco-largura);
  translate: 0 var(--kuco-sobra);
  pointer-events: none;
  user-select: none;
}

.kuco img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease-out;
}

/* Antes de entrar na tela: encolhido contra a borda, pronto pro pulinho. */
.kuco.kuco-espera img {
  opacity: 0;
  transform: scale(0.85);
}

/* Card do hambúrguer: espia pela quina direita e mira a lupa no texto, que fica à esquerda. Colado na quina
   ele fica longe do fim do subtítulo, que em tela média chega perto da borda direita. */
.kuco-lupa {
  --kuco-largura: clamp(150px, 16vw, 230px);
  --kuco-sobra: 7.17%;
  right: clamp(8px, 2vw, 32px);
}

/* Até aqui o subtítulo ocupa quase a largura toda e desce até a altura do Kuco: o card desce junto. */
@media (max-width: 1100px) {
  .cartao-destaque.kuco-palco {
    margin-top: 112px;
  }
}

/* Formação do preço: quina de cima à direita, longe do título centralizado. */
.kuco-prancheta {
  --kuco-largura: clamp(150px, 15vw, 220px);
  --kuco-sobra: 5.71%;
  right: 20px;
}

/* Card da calculadora: a mão que aponta passa da borda e entra no card. Ancorado pela direita, o dedo cai
   no vão entre o nome do plano e o selo "Recomendado" (que fica preso na quina direita). */
.kuco-apontando {
  --kuco-largura: clamp(150px, 13vw, 190px);
  --kuco-sobra: 23.25%;
  right: 144px;
}

/* Rodapé: debruçado na linha do copyright, à direita da assinatura. Os braços apoiam por cima da linha,
   então quase nada passa dela. */
.kuco-repousando {
  --kuco-largura: clamp(120px, 12vw, 170px);
  --kuco-sobra: 1.5%;
  right: 0;
}

/* Pilha do bento no celular: um bloco de altura zero logo antes do primeiro card, preso no mesmo topo que ele
   (kuco.js copia o top que o pilha-rolagem.js escreve). O Kuco espia por cima, centralizado. No PC não existe. */
.kuco-pilha {
  display: none;
}

.kuco-chave-inglesa {
  --kuco-largura: clamp(130px, 38vw, 160px);
  --kuco-sobra: 9.35%;
  left: 0;
  right: 0;
  margin-inline: auto;
}

/* No celular o Kuco passa da folga que cada bloco tem em cima: cada ponto ganha o espaço da altura dele. */
@media (max-width: 900px) {
  .pilha-on > .kuco-pilha {
    display: block;
    position: sticky;
    z-index: 1;
    height: 0;
  }

  /* Antes de a pilha grudar o Kuco sobe acima do primeiro card: sem a folga, cobriria o subtítulo. */
  .bento.pilha-on {
    margin-top: 72px;
  }

  /* Empilhados, os painéis ficam a 32px um do outro: sem a folga, a prancheta cobriria o pé do painel de cima. */
  .cartao-bege .kuco-palco {
    margin-top: 48px;
  }

  /* Empilhado não tem título por perto: a prancheta vai pra quina esquerda (pedido do dono). */
  .kuco-prancheta {
    right: auto;
    left: 20px;
  }

  /* Sem a folga, o corpo encostaria no seletor Mensal/Vitalício (sobram ~29px depois que o card sobe). */
  .planos-moldura {
    margin-top: 104px;
  }

  /* A assinatura ocupa quase a largura toda: o Kuco deita entre ela e a linha do copyright. */
  .rodape-assinatura {
    margin-bottom: 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kuco img {
    transition: none;
  }
}