/* ══════════════════════════════════════════════════════════════════════════
   botones.css
   Botones y enlaces reutilizados en todo el sitio
   Procede de styles.css (secciones 4b) del proyecto original.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Botones de WhatsApp (CTA principal del sitio) ─── */
.boton-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--area-tactil);
  min-width: var(--area-tactil);
  padding: 0.65rem 1.05rem;
  border-radius: 999px;
  background: var(--color-whatsapp);
  color: #FFFFFF;                 /* 5,3:1 sobre el verde ✔ AA */
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  transition: background var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.boton-wa:hover { background: var(--color-whatsapp-hover); }
.boton-wa:active { transform: scale(0.98); }

.boton-wa--cabecera { padding-inline: 0.85rem; }
.boton-wa--grande {
  padding: 0.95rem 1.6rem;
  font-size: 1rem;
  box-shadow: 0 14px 30px -16px rgba(15, 124, 60, 0.65);
}

.icono-wa { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icono-wa--grande { width: 1.75rem; height: 1.75rem; color: var(--color-acento-oscuro); }

/* CTA secundario: perfilado en tinta, con relleno dorado tenue al pasar. */
.boton-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--area-tactil);
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: 999px;
  color: var(--color-tinta);
  font-weight: 600;
  font-size: 1rem;
  transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.boton-secundario:hover {
  border-color: var(--color-acento);
  color: var(--color-acento-oscuro);
  background: var(--color-acento-tenue);
}

.enlace-dorado {
  color: var(--color-acento-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transicion);
}
.enlace-dorado:hover { color: var(--color-tinta); }