:root {
  /* Tamaños base para desktop */
  --wa-size: 68px;
  /* WhatsApp más grande */
  --scroll-size: 40px;
  /* Scroll más pequeño */
  --fab-gap: 14px;
  /* separación vertical */
  --fab-margin: 16px;
  /* margen a bordes */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Wrapper fijo en esquina inferior derecha */
.floating-buttons {
  position: fixed;
  bottom: calc(var(--fab-margin) + var(--safe-bottom));
  right: var(--fab-margin);
  display: flex;
  flex-direction: column;
  /* Scroll arriba, WhatsApp abajo */
  align-items: center;
  /* centra en el eje X entre sí */
  gap: var(--fab-gap);
  z-index: 9999;
}

/* Tamaños proporcionales dentro del wrapper */
.floating-buttons .scroll-to-top {
  width: var(--scroll-size);
  height: var(--scroll-size);
  line-height: var(--scroll-size);
}

.floating-buttons .whatsapp-float-button {
  width: var(--wa-size);
  height: var(--wa-size);
}

/* Móvil */
@media (max-width: 480px) {
  :root {
    --wa-size: 58px;
    /* Increased from 42px */
    --scroll-size: 48px;
    /* Increased from 25px */
    --fab-gap: 12px;
    /* Increased from 7px */
    --fab-margin: 20px;
    /* Increased from 8px */
  }

  .floating-buttons .whatsapp-float-button i {
    font-size: 32px !important;
  }

  .floating-buttons .scroll-to-top i {
    font-size: 24px !important;
  }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 991px) {
  :root {
    --wa-size: 60px;
    /* tamaño botón WhatsApp */
    --scroll-size: 36px;
    /* tamaño scroll-to-top */
    --fab-gap: 12px;
    /* separación entre ellos */
    --fab-margin: 14px;
    /* margen a bordes */
  }
}

/* Desktop */
@media (min-width: 992px) {
  :root {
    --wa-size: 68px;
    --scroll-size: 40px;
    --fab-gap: 14px;
    --fab-margin: 16px;
  }
}