/* Contenedor fijo abajo (no afecta tu layout) */

.gd-bottom-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30px;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
  background: transparent;
}

/* Para centrar y permitir clics sólo en el botón */

.gd-bottom-cta .gd-button-wrap {
  width: 26%;
  max-width: 640px;
  pointer-events: auto;
}

/* Botón glass / liquid tipo Apple */

.gd-bottom-cta .gd-button {
  --glass-bg: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.24);
  --glass-hover-bg: rgba(255,255,255,.12);
  --glass-hover-border: rgba(255,255,255,.36);
  --text: #fff;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-family: inherit;
  font-size: clamp(.95rem, 2.5vw, 1.05rem);
  letter-spacing: .2px;
  padding: clamp(.9rem, 2.4vw, 1.1rem) clamp(1.1rem, 3.2vw, 1.4rem);
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 28px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

/* Brillo superior sutil */

.gd-bottom-cta .gd-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  background: linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,0) 42%);
  opacity: .6;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Para posicionar el pseudo-elemento correctamente */

.gd-bottom-cta .gd-button {
  position: relative;
  overflow: hidden;
}

/* Hover con glow suave */

.gd-bottom-cta .gd-button:hover {
  background: var(--glass-hover-bg);
  border-color: var(--glass-hover-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 14px 36px rgba(0,0,0,.48), 0 0 34px rgba(255,255,255,.10);
  transform: translateY(-1px);
}

/* Active: micro-press */

.gd-bottom-cta .gd-button:active {
  transform: translateY(0) scale(.985);
}

/* Variante compacta (opcional): elimina el full width en desktop     Usa: <a class="gd-button is-compact">…</a> */

@media (min-width: 700px) {
  .gd-bottom-cta .gd-button.is-compact {
    width: auto;
    min-width: 220px;
  }
}

/* Respeta usuarios con reduce motion */

@media (prefers-reduced-motion: reduce) {
  .gd-bottom-cta .gd-button {
    transition: none;
  }
}

/* === Animación flotante para el botón fijo inferior === */

.gd-bottom-cta .gd-button {
  animation: gd-float 3.8s ease-in-out infinite;
  will-change: transform, box-shadow;
  transform: translateZ(0);
}

/* Pausa la animación mientras el usuario pasa el mouse (opcional, pero se siente premium) */

.gd-bottom-cta .gd-button:hover {
  animation-play-state: paused;
}

/* Keyframes del “flotado” sutil */

@keyframes gd-float {
  0% {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 28px rgba(0,0,0,.35);
  }
  50% {
    transform: translateY(-6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 36px rgba(0,0,0,.45);
  }
  100% {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 28px rgba(0,0,0,.35);
  }
}

/* Respeta “Reducir movimiento” del sistema */

@media (prefers-reduced-motion: reduce) {
  .gd-bottom-cta .gd-button {
    animation: none;
  }
}