/* ═══════════════════════════════════════════════════════════════
   Recovery CT – Floating Action Buttons
   Color principal: #2A90A0 (teléfono / teal corporativo)
   WhatsApp:        #25D366 (verde marca oficial)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rct-phone-color:   #2A90A0;
  --rct-phone-shadow:  rgba(42, 144, 160, 0.45);
  --rct-wa-color:      #25D366;
  --rct-wa-shadow:     rgba(37, 211, 102, 0.45);
  --rct-size:          56px;
  --rct-gap:           14px;
  --rct-offset-right:  22px;
  --rct-offset-bottom: 24px;
  --rct-icon-size:     28px;
  --rct-radius:        16px;
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.rct-fab-wrapper {
  position: fixed;
  right: var(--rct-offset-right);
  bottom: var(--rct-offset-bottom);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rct-gap);
}

/* ── Base button ─────────────────────────────────────────────── */
.rct-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rct-size);
  height: var(--rct-size);
  border-radius: var(--rct-radius);
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
  transition:
    transform   0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow  0.25s ease,
    background  0.25s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.rct-fab svg {
  width: var(--rct-icon-size);
  height: var(--rct-icon-size);
  flex-shrink: 0;
  pointer-events: none;
}

/* ── Phone ───────────────────────────────────────────────────── */
.rct-fab--phone {
  background: var(--rct-phone-color);
  box-shadow:
    0 4px 14px var(--rct-phone-shadow),
    0 1px 3px rgba(0,0,0,.15);
}

.rct-fab--phone:hover,
.rct-fab--phone:focus-visible {
  transform: scale(1.07)!important;
  background: var(--rct-phone-color) !important;
  box-shadow:
    0 8px 24px var(--rct-phone-shadow),
    0 2px 6px rgba(0,0,0,.18);
  outline: none;
}

.rct-fab--phone:active {
  transform: scale(0.95);
}

/* Pulse ring – teléfono */
.rct-fab--phone::before {
  content: '';
  position: absolute;
  width: var(--rct-size);
  height: var(--rct-size);
  border-radius: var(--rct-radius);
  background: var(--rct-phone-color);
  opacity: 0;
  animation: rct-pulse 2.8s ease-out infinite;
}

/* ── WhatsApp ────────────────────────────────────────────────── */
.rct-fab--whatsapp {
  background: var(--rct-wa-color);
  box-shadow:
    0 4px 14px var(--rct-wa-shadow),
    0 1px 3px rgba(0,0,0,.15);
}

.rct-fab--whatsapp:hover,
.rct-fab--whatsapp:focus-visible {
  transform: scale(1.07)!important;
  background: var(--rct-wa-color) !important;
  box-shadow:
    0 8px 24px var(--rct-wa-shadow),
    0 2px 6px rgba(0,0,0,.18);
  outline: none;
}

.rct-fab--whatsapp:active {
  transform: scale(0.95);
}

/* Pulse ring – WhatsApp */
.rct-fab--whatsapp::before {
  content: '';
  position: absolute;
  width: var(--rct-size);
  height: var(--rct-size);
  border-radius: var(--rct-radius);
  background: var(--rct-wa-color);
  opacity: 0;
  animation: rct-pulse 2.8s ease-out infinite 1.4s; /* offset para que no pulsen a la vez */
}

/* ── Pulse keyframes ─────────────────────────────────────────── */
@keyframes rct-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  60%  { transform: scale(1.7);  opacity: 0;   }
  100% { transform: scale(1.7);  opacity: 0;   }
}

/* ── Entrada animada al cargar la página ─────────────────────── */
.rct-fab--phone {
  animation: rct-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}
.rct-fab--whatsapp {
  animation: rct-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

@keyframes rct-enter {
  from { opacity: 0; transform: scale(0.4) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --rct-size:          52px;
    --rct-icon-size:     24px;
    --rct-offset-right:  14px;
    --rct-offset-bottom: 18px;
    --rct-gap:           12px;
    --rct-radius:        14px;
  }
}

/* ── Reduce motion (accesibilidad) ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rct-fab,
  .rct-fab::before {
    animation: none !important;
    transition: none !important;
  }
}