/* ============================================================
   MIKUY — components.css
   Elementos reutilizables: botones, boton flotante de WhatsApp y animacion de aparicion.
   ============================================================ */

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:999px;font-weight:700;font-size:.95rem;
  border:1.5px solid transparent;cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--green-700);color:#fff}
.btn-primary:hover{background:var(--green-800);transform:translateY(-2px)}
.btn-amber{background:var(--amber);color:#3A2606;box-shadow:0 12px 28px -12px rgba(227,155,46,.8)}
.btn-amber:hover{filter:brightness(1.06);transform:translateY(-2px)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--green-700);color:var(--green-700)}


/* ---------- WhatsApp flotante ---------- */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  transition:.25s;
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;fill:#fff}

/* ---------- Animación de entrada ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}