/* O "presente" — chamada flutuante pro banco de questões.
   Aparece no canto inferior-direito em desktop; vira card no fluxo em mobile. */

.gift-cta {
  /* Unidade base responsiva. Tudo escala em função dela.
     Cap superior 19 (≈70% maior que o original). Em viewports apertados encolhe via vw/vmin. */
  --k: clamp(13px, min(1vw, 1.7vmin), 19px);

  position: fixed;
  /* Posição base: alinha o limite direito do gift próximo do início do card
     "Qual é a sua ambição?" (que começa após coluna esquerda de 580px).
     Usa `right` em px (após calc) — ambos estados usam `right`, browsers
     interpolam em px → animação "estrela cadente" funciona. */
  right: calc(50% + clamp(80px, 6vw, 180px));
  bottom: clamp(16px, 2.4vh, 28px);
  z-index: 100;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--k) * 0.733);
  text-decoration: none;
  cursor: pointer;
  transition:
    opacity .4s ease,
    right .95s cubic-bezier(.32, .9, .35, 1),
    bottom .95s cubic-bezier(.32, .9, .35, 1);
}

/* Estado "compacto": ativado quando o usuário rola pra fora da hero.
   A tag colapsa, o ícone encolhe e voa pro canto INFERIOR DIREITO
   (lado mais livre da tela). Continua presente e clicável. */
.gift-cta.is-compact {
  right: clamp(16px, 2.4vw, 28px);
}
.gift-cta.is-compact .gift-cta__tag {
  opacity: 0;
  max-height: 0;
  padding-top: 0; padding-bottom: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
}
.gift-cta.is-compact .gift-cta__tag::before,
.gift-cta.is-compact .gift-cta__tag::after {
  opacity: 0;
}
.gift-cta.is-compact .gift-cta__svg {
  width: calc(var(--k) * 4.6);
  height: calc(var(--k) * 4.6);
}
.gift-cta__tag {
  transition: opacity .35s ease, max-height .35s ease, padding .35s ease, margin .35s ease;
}
.gift-cta__tag::before,
.gift-cta__tag::after {
  transition: opacity .25s ease;
}

/* Hint "se mudar de ideia, clica aqui" — aparece SÓ no modo compact,
   acima do ícone. Delay pra surgir DEPOIS que o presente terminou
   de voar pro canto direito. */
.gift-cta__hint {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  white-space: nowrap;
  background: rgba(14, 10, 6, 0.82);
  color: rgba(247, 236, 205, 0.92);
  padding: 6px 12px;
  border-radius: 999px;
  font: 500 12px/1.2 Inter, system-ui, sans-serif;
  border: 1px solid rgba(212, 168, 87, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(6px) scale(.92);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.gift-cta.is-compact .gift-cta__hint {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* Delay pra aparecer DEPOIS que o presente terminou de voar */
  transition-delay: .7s;
}

/* Tag manuscrita "presente" — em Caveat, pendurada por cordão */
.gift-cta__tag {
  display: inline-block;
  text-align: center;
  padding: calc(var(--k) * 0.5) calc(var(--k) * 0.95) calc(var(--k) * 0.4);
  background: linear-gradient(135deg, #f5ebd1, #e8d7a6);
  color: #5c3a18;
  font: 600 calc(var(--k) * 1.7)/1.18 Caveat, cursive;
  letter-spacing: 0.01em;
  border-radius: calc(var(--k) * 0.333);
  transform: rotate(2deg);
  box-shadow: 0 calc(var(--k) * 0.333) calc(var(--k) * 1.067) rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative;
  margin-bottom: calc(var(--k) * -0.3);
  /* Calibrado pra que a linha 1 (a maior agora, já que a linha 2 é <small>)
     + padding caiba sem quebrar. Resultado: 2 linhas via <br>. */
  max-width: min(42vw, calc(var(--k) * 30));
  /* furinho no topo da tag por onde passa o cordão */
}
.gift-cta__tag strong {
  font-weight: 800;
  color: #3a2710;
}
.gift-cta__tag small {
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.92;
}
.gift-cta__tag::before {
  content: ""; position: absolute;
  top: calc(var(--k) * 0.22); left: 50%; transform: translateX(-50%);
  width: calc(var(--k) * 0.42); height: calc(var(--k) * 0.42);
  background: #3a2710;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}
.gift-cta__tag::after {
  /* cordão fininho subindo da tag até o laço */
  content: ""; position: absolute;
  top: calc(var(--k) * -1.267); left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 2px; height: calc(var(--k) * 1.267);
  background: rgba(58, 39, 16, 0.7);
}

/* Pacote do presente — SVG inline */
.gift-cta__svg {
  width: calc(var(--k) * 10.13);
  height: calc(var(--k) * 10.13);
  filter: drop-shadow(0 calc(var(--k) * 1.067) calc(var(--k) * 1.8) rgba(0,0,0,0.45)) drop-shadow(0 calc(var(--k) * 0.333) calc(var(--k) * 0.733) rgba(0,0,0,0.3));
  /* Respiração suave: pulsa muito de leve a cada 4s */
  animation: gift-breath 4.2s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease, width .4s ease, height .4s ease;
}

@keyframes gift-breath {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.025) translateY(-2px); }
}

/* Hover: laço brilha, presente sobe um pouco mais */
.gift-cta:hover .gift-cta__svg,
.gift-cta:focus-visible .gift-cta__svg {
  transform: scale(1.08) translateY(-8px) rotate(2deg);
  filter: drop-shadow(0 24px 38px rgba(0,0,0,0.5)) drop-shadow(0 0 24px rgba(251, 232, 180, 0.35));
  animation-play-state: paused;
}
.gift-cta:hover .gift-cta__shine,
.gift-cta:focus-visible .gift-cta__shine {
  animation: gift-shine 1.4s ease-out;
}

@keyframes gift-shine {
  0% { transform: translateX(-100%) rotate(20deg); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translateX(220%) rotate(20deg); opacity: 0; }
}

.gift-cta:focus-visible {
  outline: 2px solid rgba(212, 168, 87, 0.6);
  outline-offset: 8px;
  border-radius: 8px;
}

/* Animação ao clicar — abre o presente antes de navegar */
.gift-cta.is-opening .gift-cta__svg {
  animation: gift-open .55s forwards cubic-bezier(.4,0,.2,1);
}
@keyframes gift-open {
  0%   { transform: scale(1.08) translateY(-8px); }
  40%  { transform: scale(1.18) translateY(-16px) rotate(-4deg); }
  100% { transform: scale(0.6) translateY(-108px) rotate(8deg); opacity: 0; }
}
.gift-cta.is-opening .gift-cta__tag {
  animation: tag-fly .55s forwards cubic-bezier(.4,0,.2,1);
}
@keyframes tag-fly {
  0% { opacity: 1; }
  100% { transform: translateY(27px) rotate(-15deg); opacity: 0; }
}

/* Em telas pequenas, presente sai do canto e vai no fluxo da página
   (entre hero e próxima seção) pra não atrapalhar o card de ambição */
@media (max-width: 1100px) {
  .gift-cta {
    position: relative;
    right: auto; bottom: auto;
    margin: 32px auto 16px;
    background: rgba(14, 10, 6, 0.65);
    padding: 19px 27px;
    border-radius: 24px;
    border: 1px solid rgba(212, 168, 87, 0.24);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: row;
    gap: 19px;
  }
  .gift-cta__svg { width: 86px; height: 86px; }
  .gift-cta__tag { transform: rotate(-2deg); font-size: 18px; max-width: 297px; padding: 8px 16px 7px; }
  .gift-cta__tag::after { display: none; }
}

@media (max-width: 480px) {
  .gift-cta {
    flex-direction: column;
    gap: 6px;
  }
}

/* Suporte a usuários que pedem menos animação */
@media (prefers-reduced-motion: reduce) {
  .gift-cta__svg { animation: none; }
  .gift-cta:hover .gift-cta__svg, .gift-cta:focus-visible .gift-cta__svg { transform: none; }
}

/* Safety: em viewports baixos, reserva espaço no slogan-col pra que o conteúdo
   (didática superior / rotina adaptativa / "O destino da educação...") suba em vez
   de ser sobreposto pelo presente flutuante. Como a coluna usa justify-content:center,
   padding-bottom empurra o centro pra cima. */
@media (min-width: 1101px) {
  .hero-v2__slogan-col {
    padding-bottom: max(0px, calc(290px - 30vh));
  }
}