/* =========================================================
   CLIC AL CORAZÓN — SCROLL UP
   WORDPRESS + ELEMENTOR SAFE
========================================================= */

/* =========================================================
   CONTENEDOR
========================================================= */

.cac-scroll-up-component {
  position: relative;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* =========================================================
   BOTÓN SCROLL UP
========================================================= */

.cac-scroll-up-component .cac-scroll-up-button {
  position: fixed;

  /*
     Posición normal:
     esquina inferior derecha
  */
  right: 24px;
  bottom: 24px;

  width: 56px;
  height: 56px;

  margin: 0;
  padding: 0;

  border: 1px solid rgba(255, 240, 216, 0.25);
  border-radius: 50%;

  background: #770101;
  color: #fbf0d8;

  display: grid;
  place-items: center;

  cursor: pointer;

  /*
     FAQ = 99990
     SCROLL = 99980

     El FAQ queda por encima
     si alguna vez llegan a tocarse.
  */
  z-index: 99980;

  opacity: 0;
  visibility: hidden;

  transform: translateY(14px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;

  box-shadow: 0 12px 30px rgba(119, 1, 1, 0.25);

  appearance: none;
  -webkit-appearance: none;
}

/* =========================================================
   BOTÓN VISIBLE
========================================================= */

.cac-scroll-up-component .cac-scroll-up-button.is-visible {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

/* =========================================================
   PULSO CERCA DEL FINAL
========================================================= */

.cac-scroll-up-component .cac-scroll-up-button.is-end {
  animation: cac-scroll-end-pulse 1.8s ease-in-out infinite;

  box-shadow:
    0 0 0 5px rgba(193, 17, 30, 0.1),
    0 0 28px rgba(193, 17, 30, 0.34),
    0 12px 30px rgba(119, 1, 1, 0.28);
}

@keyframes cac-scroll-end-pulse {
  0%,
  100% {
    transform: scale(1);

    box-shadow:
      0 0 0 4px rgba(193, 17, 30, 0.08),
      0 0 20px rgba(193, 17, 30, 0.25),
      0 12px 30px rgba(119, 1, 1, 0.25);
  }

  50% {
    transform: scale(1.08);

    box-shadow:
      0 0 0 9px rgba(193, 17, 30, 0.03),
      0 0 34px rgba(193, 17, 30, 0.42),
      0 15px 34px rgba(119, 1, 1, 0.3);
  }
}

/* =========================================================
   ✨ ANIMACIÓN ORIGINAL
   EL BOTÓN SALE DISPARADO HACIA ARRIBA
========================================================= */

.cac-scroll-up-component .cac-scroll-up-button.is-flying {
  animation: cac-scroll-fly-up 0.72s cubic-bezier(0.18, 0.75, 0.25, 1) forwards !important;

  pointer-events: none;
}

@keyframes cac-scroll-fly-up {
  0% {
    transform: translateY(0) scale(1);

    opacity: 1;
  }

  35% {
    transform: translateY(-18px) scale(1.12);

    opacity: 1;
  }

  100% {
    transform: translateY(calc(-1 * (100vh - 120px))) scale(0.55);

    opacity: 0;
  }
}

/* =========================================================
   HOVER
========================================================= */

.cac-scroll-up-component .cac-scroll-up-button:hover {
  background: #c1111e;

  box-shadow: 0 16px 36px rgba(119, 1, 1, 0.32);

  transform: translateY(-3px);
}

/* =========================================================
   CLICK
========================================================= */

.cac-scroll-up-component .cac-scroll-up-button:active {
  transform: translateY(0) scale(0.96);
}

/* =========================================================
   ICONO
========================================================= */

.cac-scroll-up-component .cac-scroll-up-icon {
  width: 22px;
  height: 22px;

  display: block;

  fill: none;

  stroke: currentColor;

  stroke-width: 2.2;

  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

/* =========================================================
   FOCUS
========================================================= */

.cac-scroll-up-component .cac-scroll-up-button:focus-visible {
  outline: 3px solid #659aba;
  outline-offset: 4px;
}

/* =========================================================
   ⭐ CUANDO EXISTE FAQ
=========================================================

   FAQ:
   right: 24px
   bottom: 24px
   width: 58px
   height: 58px

   Scroll Up:
   right: 24px
   bottom: 94px

   Resultado:

        FAQ
         ↓
        24px aprox.
         ↓
       SCROLL UP

========================================================= */

body:has(.cac-faq-widget) .cac-scroll-up-component .cac-scroll-up-button {
  bottom: 94px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {
  .cac-scroll-up-component .cac-scroll-up-button {
    width: 50px;
    height: 50px;

    right: 16px;
    bottom: 16px;
  }

  /*
     FAQ móvil:
     55 x 55
     right: 16
     bottom: 16

     Scroll:
     50 x 50
     right: 16
     bottom: 81
  */

  body:has(.cac-faq-widget) .cac-scroll-up-component .cac-scroll-up-button {
    bottom: 81px;
  }

  .cac-scroll-up-component .cac-scroll-up-icon {
    width: 20px;
    height: 20px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cac-scroll-up-component .cac-scroll-up-button {
    transition: none;
  }

  .cac-scroll-up-component .cac-scroll-up-button.is-end,
  .cac-scroll-up-component .cac-scroll-up-button.is-flying {
    animation: none;
  }
}