/* ============================================================
   FAB de contacto — llamar / email
   z-index 900: por encima del contenido, por debajo del
   overlay de navegación (999) y del menú móvil (1001).
   ============================================================ */

.fab{
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: .75rem;
}

/* --- Acciones apiladas encima del principal --- */
.fab__actions{
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
  margin: 0; padding: 0; list-style: none;
}
.fab__action{
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .6rem 1.1rem .6rem .95rem;
  background: var(--color-white, #FFFDF7);
  color: var(--color-primary-dark, #1E2E1B);
  border: 1px solid var(--color-border, #D4CABB);
  border-radius: 999px;
  font-family: var(--font-body, sans-serif); font-size: .95rem; font-weight: 600;
  box-shadow: 0 10px 26px -12px rgba(20,30,16,.45);
  text-decoration: none; white-space: nowrap;
  /* estado cerrado */
  opacity: 0; visibility: hidden;
  transform: translateY(12px) scale(.94);
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.4,.64,1), visibility .22s;
}
.fab__action svg{ width: 20px; height: 20px; flex-shrink: 0; }
.fab__action:hover,
.fab__action:focus-visible{ background: var(--color-primary-dark, #1E2E1B); color: #F7F3E7; border-color: var(--color-primary-dark, #1E2E1B); }

/* abierto: escalonado 0ms / 60ms */
.fab.is-open .fab__action{ opacity: 1; visibility: visible; transform: none; }
.fab.is-open .fab__action:nth-child(1){ transition-delay: .06s; }
.fab.is-open .fab__action:nth-child(2){ transition-delay: 0s; }

/* --- Botón principal --- */
.fab__toggle{
  width: 56px; height: 56px; min-width: 48px; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-primary-dark, #1E2E1B);
  color: var(--color-gold-light, #D4AF5A);
  box-shadow: 0 14px 30px -10px rgba(20,30,16,.6);
  transition: background .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.fab__toggle:hover{ background: #0C160A; }
.fab__toggle svg{ width: 24px; height: 24px; }
.fab__icon--close{ display: none; }
.fab.is-open .fab__toggle{ background: var(--color-gold, #B8963E); color: #221C0A; transform: rotate(90deg); }
.fab.is-open .fab__icon--open{ display: none; }
.fab.is-open .fab__icon--close{ display: block; }

/* --- Foco visible --- */
.fab__toggle:focus-visible,
.fab__action:focus-visible{
  outline: 3px solid var(--color-gold, #B8963E);
  outline-offset: 3px;
}

/* --- back-to-top: se aparta a la izquierda para no chocar --- */
.back-to-top{
  right: auto !important;
  left: max(1rem, env(safe-area-inset-left)) !important;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
  width: 48px !important; height: 48px !important;
  z-index: 890 !important;
}

/* --- que el FAB no tape el final del pie --- */
.footer{ padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }

@media (prefers-reduced-motion: reduce){
  .fab__action{ transition: opacity .01s linear, visibility .01s linear; transform: none; }
  .fab.is-open .fab__action{ transition-delay: 0s !important; }
  .fab__toggle{ transition: none; }
  .fab.is-open .fab__toggle{ transform: none; }
}