/* Componente original convertido de SCSS para CSS e adaptado ao verde FocoFit. */
.library-cta {
  --stone-50: #fafaf9;
  --stone-800: #292524;
  --neon-green: #c5f542;
  --cta-content-padding: 0.75rem 1.25rem;

  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 1rem !important;
  overflow: visible !important;
  background: transparent !important;
  color: var(--stone-50) !important;
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 6px;
  box-shadow: none !important;
  transform: none !important;
}

.library-cta:active {
  outline-color: var(--neon-green) !important;
}

.library-cta:focus-visible {
  outline-color: var(--neon-green) !important;
  outline-style: dashed;
}

.library-cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  height: 200%;
  max-height: 100px;
  aspect-ratio: 1;
  margin: auto;
  background: white;
  clip-path: polygon(
    100% 50%,
    91.48% 56.57%,
    97.55% 65.45%,
    87.42% 69.07%,
    90.45% 79.39%,
    79.7% 79.7%,
    79.39% 90.45%,
    69.07% 87.42%,
    65.45% 97.55%,
    56.57% 91.48%,
    50% 100%,
    43.43% 91.48%,
    34.55% 97.55%,
    30.93% 87.42%,
    20.61% 90.45%,
    20.3% 79.7%,
    9.55% 79.39%,
    12.58% 69.07%,
    2.45% 65.45%,
    8.52% 56.57%,
    0% 50%,
    8.52% 43.43%,
    2.45% 34.55%,
    12.58% 30.93%,
    9.55% 20.61%,
    20.3% 20.3%,
    20.61% 9.55%,
    30.93% 12.58%,
    34.55% 2.45%,
    43.43% 8.52%,
    50% 0%,
    56.57% 8.52%,
    65.45% 2.45%,
    69.07% 12.58%,
    79.39% 9.55%,
    79.7% 20.3%,
    90.45% 20.61%,
    87.42% 30.93%,
    97.55% 34.55%,
    91.48% 43.43%
  );
  animation: focofit-star-rotate 4s linear infinite;
  opacity: 0.42;
  pointer-events: none;
}

.library-cta:hover::before {
  opacity: 1;
}

/* Primeiro div: moldura verde e sombras em camadas. */
.library-cta > .library-cta__frame {
  position: relative;
  z-index: 1;
  min-height: inherit;
  padding: 2px;
  border-radius: 1rem;
  background-color: var(--neon-green);
  transform: translate(-4px, -4px);
  transition: all 150ms ease;
  box-shadow:
    0.5px 0.5px 0 0 var(--neon-green),
    1px 1px 0 0 var(--neon-green),
    1.5px 1.5px 0 0 var(--neon-green),
    2px 2px 0 0 var(--neon-green),
    2.5px 2.5px 0 0 var(--neon-green),
    3px 3px 0 0 var(--neon-green),
    0 0 0 2px var(--stone-800),
    0.5px 0.5px 0 2px var(--stone-800),
    1px 1px 0 2px var(--stone-800),
    1.5px 1.5px 0 2px var(--stone-800),
    2px 2px 0 2px var(--stone-800),
    2.5px 2.5px 0 2px var(--stone-800),
    3px 3px 0 2px var(--stone-800),
    3.5px 3.5px 0 2px var(--stone-800),
    4px 4px 0 2px var(--stone-800),
    0 0 0 4px var(--stone-50),
    0.5px 0.5px 0 4px var(--stone-50),
    1px 1px 0 4px var(--stone-50),
    1.5px 1.5px 0 4px var(--stone-50),
    2px 2px 0 4px var(--stone-50),
    2.5px 2.5px 0 4px var(--stone-50),
    3px 3px 0 4px var(--stone-50),
    3.5px 3.5px 0 4px var(--stone-50),
    4px 4px 0 4px var(--stone-50);
}

.library-cta:hover > .library-cta__frame,
.library-cta:focus-visible > .library-cta__frame {
  transform: translate(0, 0);
  box-shadow:
    0 0 0 0 var(--neon-green),
    0 0 0 0 var(--neon-green),
    0 0 0 0 var(--neon-green),
    0 0 0 0 var(--neon-green),
    0 0 0 0 var(--neon-green),
    0 0 0 0 var(--neon-green),
    0 0 0 2px var(--stone-800),
    0 0 0 2px var(--stone-800),
    0 0 0 2px var(--stone-800),
    0 0 0 2px var(--stone-800),
    0 0 0 2px var(--stone-800),
    0 0 0 2px var(--stone-800),
    0 0 0 2px var(--stone-800),
    0 0 0 2px var(--stone-800),
    0 0 0 2px var(--stone-800),
    0 0 0 4px var(--stone-50),
    0 0 0 4px var(--stone-50),
    0 0 0 4px var(--stone-50),
    0 0 0 4px var(--stone-50),
    0 0 0 4px var(--stone-50),
    0 0 0 4px var(--stone-50),
    0 0 0 4px var(--stone-50),
    0 0 0 4px var(--stone-50),
    0 0 0 4px var(--stone-50);
}

/* Segundo div: superfície escura que encobre o centro da estrela. */
.library-cta > .library-cta__frame > .library-cta__face {
  position: relative;
  min-height: inherit;
  pointer-events: none;
  border-radius: calc(1rem - 2px);
  background-color: var(--stone-800);
}

.library-cta > .library-cta__frame > .library-cta__face::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  opacity: 0.1;
  background-image:
    radial-gradient(rgb(255 255 255 / 80%) 20%, transparent 20%),
    radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
  mix-blend-mode: hard-light;
  box-shadow: inset 0 0 0 1px var(--stone-800);
  animation: focofit-dots 0.4s infinite linear;
  transition: opacity 150ms ease;
}

/* Terceiro div: conteúdo do CTA. */
.library-cta > .library-cta__frame > .library-cta__face > .library-cta__content {
  position: relative;
  display: flex;
  min-height: inherit;
  align-items: center;
  justify-content: center;
  padding: var(--cta-content-padding);
  gap: 0.25rem;
  filter: drop-shadow(0 -1px 0 var(--stone-800));
}

.library-cta:hover > .library-cta__frame > .library-cta__face > .library-cta__content {
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.1));
}

.library-cta:active > .library-cta__frame > .library-cta__face > .library-cta__content {
  transform: translateY(2px);
}

/* Integração com os CTAs existentes da página. */
.contextual-cta__button.library-cta > .library-cta__frame,
.focofit-btn-submit.library-cta > .library-cta__frame {
  width: 100%;
}

/* Reserva o espaço das sombras para o CTA não ultrapassar a coluna do formulário. */
.focofit-btn-submit.library-cta > .library-cta__frame {
  width: calc(100% - 16px);
  margin-inline: 8px;
}

/* Mantém o aviso de privacidade fora da área visual da moldura e da estrela. */
.focofit-btn-submit.library-cta + .focofit-privacy-notice {
  margin-top: 24px !important;
}

.contextual-cta__button.library-cta::after {
  display: none;
}

.contextual-cta__button.library-cta .library-cta__content::after {
  content: "→";
  flex: 0 0 auto;
  margin-left: 8px;
  color: var(--neon-green);
  font-family: Arial, sans-serif;
  font-size: 1.35em;
  font-style: normal;
  font-weight: 900;
  line-height: 0;
  transition: transform 180ms ease;
}

.contextual-cta__button.library-cta:hover .library-cta__content::after,
.contextual-cta__button.library-cta:focus-visible .library-cta__content::after {
  transform: translateX(4px);
}

.elementor-9 .elementor-element.elementor-element-1ad5a7c .elementor-button.library-cta {
  padding: 0 !important;
  overflow: visible !important;
  animation: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.library-cta.elementor-button::after {
  display: none !important;
}

.library-cta.elementor-button .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
}

.library-cta.elementor-button svg,
.library-cta.focofit-btn-submit svg {
  color: var(--neon-green) !important;
  fill: var(--neon-green) !important;
}

#oferta .focofit-lead-card button.focofit-btn-submit.library-cta,
.focofit-lead-card button.focofit-btn-submit.library-cta,
button.focofit-btn-submit.library-cta {
  width: 100%;
  padding: 0 !important;
  gap: 0;
  background: transparent !important;
  color: var(--stone-50) !important;
  box-shadow: none !important;
  transform: none !important;
}

.focofit-lead-card button.focofit-btn-submit.library-cta:disabled,
.focofit-lead-card button.focofit-btn-submit.library-cta.is-loading,
button.focofit-btn-submit.library-cta:disabled,
button.focofit-btn-submit.library-cta.is-loading {
  background: transparent !important;
  color: var(--stone-50) !important;
  box-shadow: none !important;
  transform: none !important;
}

.library-cta .focofit-spinner {
  border-color: rgb(197 245 66 / 35%);
  border-top-color: var(--neon-green);
}

@keyframes focofit-star-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes focofit-dots {
  0% { background-position: 0 0, 4px 4px; }
  100% { background-position: 8px 0, 12px 4px; }
}

@media (min-width: 901px) {
  .identificacao-cards-layout .contextual-cta--identificacao .library-cta {
    --cta-content-padding: 0.7rem 0.55rem;
  }
}

@media (max-width: 767px) {
  .contextual-cta__button.library-cta {
    --cta-content-padding: 0.6rem 0.85rem;
    width: min(calc(100% - 40px), 340px);
    font-size: clamp(0.72rem, 3vw, 0.84rem) !important;
  }

  .focofit-btn-submit.library-cta {
    --cta-content-padding: 0.75rem 1rem;
  }

  #oferta .is-hotmart .focofit-hotmart-cta .contextual-cta__button.library-cta {
    --cta-content-padding: 0.5rem 0.7rem;
    width: min(calc(100% - 48px), 320px) !important;
    min-height: 0;
    font-size: clamp(0.72rem, 3.2vw, 0.85rem) !important;
    white-space: nowrap;
  }

  #oferta .is-hotmart .focofit-hotmart-cta .library-cta__content {
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-cta,
  .library-cta::before,
  .library-cta > .library-cta__frame,
  .library-cta__face::before,
  .library-cta__content,
  .library-cta__content::after,
  .library-cta svg {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  .library-cta:active,
  .library-cta:focus-visible {
    outline-color: var(--neon-green) !important;
  }
}