/* CJTA Lubricantes — Componentes: botones, FAB de WhatsApp y toast */

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:14px 22px;
  border-radius:2px;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 60%, var(--gold-deep) 100%);
  color:var(--navy);
  box-shadow:0 14px 30px -12px rgba(201,160,71,.55);
}
.btn-gold:hover{box-shadow:0 18px 36px -14px rgba(201,160,71,.75)}
.btn-red{
  background:var(--red);
  color:#fff;
  box-shadow:0 12px 24px -10px rgba(192,57,43,.5);
}
.btn-red:hover{background:var(--red-2)}
.btn-wa{
  background:var(--wa);color:#fff;
  box-shadow:0 12px 26px -10px rgba(37,211,102,.55);
}
.btn-wa:hover{background:var(--wa-2)}
/* Ghost: transparente con borde dorado sutil. Mismo alto que .btn-gold
   compensando el border con -1px de padding vertical/horizontal. */
.btn-ghost{
  background:transparent;
  color:var(--offwhite);
  border:1px solid rgba(201,160,71,.4);
  padding:13px 21px;
}
.btn-ghost:hover{
  background:rgba(201,160,71,.08);
  border-color:rgba(201,160,71,.7);
}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  padding:14px 0;
  border-bottom:1px solid var(--rule);
  transition:gap .2s ease, color .2s ease, border-color .2s ease;
}
.link-arrow svg{width:18px;height:18px}
.link-arrow:hover{gap:14px;color:var(--gold-2);border-color:var(--gold)}
.link-arrow-dark{color:var(--red);border-color:rgba(192,57,43,.3)}
.link-arrow-dark:hover{color:var(--red-2);border-color:var(--red)}

/* ========== FAB WHATSAPP ========== */
.fab-wa{
  position:fixed;right:24px;bottom:24px;z-index:60;
  width:60px;height:60px;border-radius:50%;
  background:var(--wa);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 16px 36px -10px rgba(37,211,102,.6);
  transition:transform .2s ease;
}
.fab-wa svg{width:28px;height:28px}
.fab-wa:hover{transform:scale(1.08)}
.fab-pulse{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--wa);
  animation:fabpulse 2s ease-out infinite;
}
@keyframes fabpulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(1.45);opacity:0}
}

/* ========== TOAST ========== */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translate(-50%,140%);
  background:var(--navy);color:var(--offwhite);
  padding:14px 22px;
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-body);
  font-weight:500;
  font-size:13.5px;
  border:1px solid var(--gold);
  border-radius:2px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  z-index:200;
  transition:transform .35s ease;
}
.toast.show{transform:translate(-50%,0)}
.toast svg{color:var(--gold)}

/* ========== FAB TOOLTIP ========== */
.fab-wa{
  isolation:isolate;
}
.fab-tooltip{
  position:absolute;
  right:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  background:var(--navy);
  color:var(--offwhite);
  font-family:var(--ff-body);
  font-weight:500;
  font-size:13px;
  padding:10px 14px;
  border:1px solid var(--rule);
  border-radius:2px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 12px 24px -8px rgba(0,0,0,.4);
}
.fab-tooltip::after{
  content:"";
  position:absolute;
  right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:8px;height:8px;
  background:var(--navy);
  border-right:1px solid var(--rule);
  border-top:1px solid var(--rule);
}
.fab-tooltip strong{color:var(--gold);font-weight:600}
.fab-wa:hover .fab-tooltip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}