/**
 * Botones CTA primarios ESAC
 * Receta: .cursor/skills/esac-desarrollo/botones-cta.md
 */

.btn-inscribete,
.site-header__cta,
.hero__btn--primary,
.course-card__btn--primary {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    var(--esac-btn-primary-fill) padding-box,
    var(--esac-btn-primary-rim) border-box;
  box-shadow: var(--esac-btn-primary-shadow);
  color: #fff;
}

.btn-inscribete::before,
.site-header__cta::before,
.hero__btn--primary::before,
.course-card__btn--primary::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 10%;
  left: 10%;
  height: 46%;
  border-radius: 0.7rem 0.7rem 50% 50% / 100% 100% 40% 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.btn-inscribete:hover,
.btn-inscribete:focus-visible,
.site-header__cta:hover,
.site-header__cta:focus-visible,
.hero__btn--primary:hover,
.hero__btn--primary:focus-visible,
.course-card__btn--primary:hover,
.course-card__btn--primary:focus-visible {
  color: #fff;
  filter: brightness(1.1);
  box-shadow: var(--esac-btn-primary-shadow-hover);
}

.btn-inscribete > span,
.site-header__cta > span,
.hero__btn--primary > span,
.course-card__btn--primary > span {
  position: relative;
  z-index: 1;
}

.course-card__btn--outline,
.hero__btn--outline {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    var(--esac-btn-dark-fill) padding-box,
    var(--esac-btn-dark-rim) border-box;
  box-shadow: var(--esac-btn-dark-shadow);
  color: #fff;
}

.course-card__btn--outline::before,
.hero__btn--outline::before {
  content: "";
  position: absolute;
  top: 1px;
  right: 10%;
  left: 10%;
  height: 46%;
  border-radius: 0.7rem 0.7rem 50% 50% / 100% 100% 40% 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 100%
  );
  pointer-events: none;
}

.course-card__btn--outline:hover,
.course-card__btn--outline:focus-visible,
.hero__btn--outline:hover,
.hero__btn--outline:focus-visible {
  color: #fff;
  filter: brightness(1.1);
  box-shadow: var(--esac-btn-dark-shadow-hover);
}

.course-card__btn--outline > span,
.hero__btn--outline > span {
  position: relative;
  z-index: 1;
}